Слайдер не адаптивиться

@Cdelphi78 · Регистрация: 21.02.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте! Слайдер ни в какую не адаптивиться, точнее картинки не уменьшаются, вроде прописал max-width и width 100% height auto

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script>
var slideWidth = 980,
    sliderTimer, currentSlide = 0, len;
 
function nextSlide() {
    currentSlide++;
    if (currentSlide >= len) currentSlide = 0;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}
 
function prevSlide() {
    currentSlide--;
    if (currentSlide < 0) currentSlide = len - 1;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}
$(function() {
    len = $(".slidewrapper").children().length
    $(".slidewrapper").width(len * slideWidth);
    sliderTimer = setInterval(nextSlide, 3000);
    $("#slider").on({
        mouseenter: function() {
            clearInterval(sliderTimer)
        },
        mouseleave: function() {
            sliderTimer = setInterval(nextSlide, 3000)
        }
    });
    $("#next_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        nextSlide()
    });
    $("#prev_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        prevSlide()
    })
});
</script>
 
    <style>
   #slider  {
    max-width: 977px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(75, 77, 97,0.6);
}
 
 .slidewrapper{
    position: absolute;
    width:3000px;
    left: 0;
    top: 0;
    height: 300px;
    margin: 0;
    padding: 0;
 
}
        
        #slider li img {
            width:100%;
            height:auto;
        }        
 
.slidewrapper .slide1 {
 
    width:100%;
    height:300px;
    float:left;
    list-style-type: none;
 
}
 
.slidewrapper .slide2 {
 
    float:left;
}
 
#slider .arrows {
    top:50%;
    text-decoration: none;
}
 
 
 
#slider #prev_slide {
    z-index: 10000;
    position: absolute;
    left:0;
    margin-top:-25px;
    font-size:40px;
}
 
 
#slider #next_slide {
    z-index: 10000;
    position: absolute;
    right:0;
    margin-top:-25px;
    font-size:40px;
}
 
 
 
    </style>
 </head>
<body>
    <div id="slider">
 
           <ul class="slidewrapper" data-current="0">
 
               <li class="slide1"><img src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
               <li class="slide2"><img src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
               <li class="slide3"><img src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
 
           </ul>
 <a href="javascript: void(0)" id="prev_slide" class="arrows"><</a>
<a href="javascript: void(0)" id="next_slide" class="arrows">></a>
 
 
           </div>
</body>
</html>

@vitsuk · 18.12.2015, 11:49

Cdelphi78, Если вы хотите полностью написать слайдер значит вам не сюда)

@Glart · 18.12.2015, 11:52

Сообщение от Cdelphi78

.slidewrapper .slide1

Ширина картинки 100% выставляется относительно родителя, а у родителя стоит фиксированная ширина:

CSS
1
2
3
4
.slidewrapper .slide1 {
width:980px;
/* .. . .. . . */
}

Действительно почему картинка 100% от 980px и не становится меньше...

Добавлено через 57 секунд
ПС: Если делаете адаптацию, то делайте адаптацию всех ключевых элементов страницы, а не выборочно.

Добавлено через 1 минуту
ППС: У вас не адаптивная верстка получается, а резиновая....

@Cdelphi78 · 18.12.2015, 12:02 **[ТС]**

Glart, Да я уже менял это, все равно не работает?

Добавлено через 30 секунд

Сообщение от vitsuk

Cdelphi78, Если вы хотите полностью написать слайдер значит вам не сюда)

Кто сказал?

Добавлено через 1 минуту

Сообщение от Glart

ППС: У вас не адаптивная верстка получается, а резиновая....

Как не адаптивная- адаптивно-резиновая, всмысле что все слайдеры резиновые должны быть)

@Glart · 18.12.2015, 12:03

Сообщение от Cdelphi78

.slidewrapper{
* * position: absolute;
* * width:3000px;

Как не странно, а у этого родителя тоже фиксированная ширина в 3000px;

Неужели так сложно просмотреть структуру и стили?

@Cdelphi78 · 18.12.2015, 12:05 **[ТС]**

Сообщение от Glart

Как не странно, а у этого родителя тоже фиксированная ширина в 3000px;
Неужели так сложно просмотреть структуру и стили?

Если вы тронете все эти ширины, слайдер поломаеться)

@Glart · 18.12.2015, 12:08

Сообщение от Cdelphi78

Как не адаптивная- адаптивно-резиновая, всмысле что все слайдеры резиновые должны быть)

Это 2 разных понятия. Если интересно, поиск в помощь. То, что вы делаете это резиновая верстка, не спорю слайдер должен быть резиновым до определенных размеров, а иначе при очень малых, текст не будет читаемым и тут мы уже применяем адаптивную верстку (это либо перестроение слайдера, замена слайдера чем-то другим или же просто сокрытие слайдера)...

Добавлено через 1 минуту

Сообщение от Cdelphi78

слайдер поломаеться)

А это значит, что данный слайдер вам не подходит. И он не предназначен для резиновой верстки.

Выберите другой слайдер, а лучше пишите свой (как вам угодно).

@Cdelphi78 · 18.12.2015, 12:12 **[ТС]**

Сообщение от Glart

И он не предназначен для резиновой верстки.

Как не предназначен?, любой элемент можно сделать резиновым разве не так?
картинки в слайдере по идее должны уменьшаться, дак это и есть свой слайдер, ну точнее код не мой слайдера.

@Glart · 18.12.2015, 12:22

Сообщение от Cdelphi78

любой элемент можно сделать резиновым

Вы же написали, что если исправить все рекомендации, то слайдер ломается. Как вывод этот слайдер нельзя сделать резиновым.

Сами себе противоречите.

ПС Если взять этот слайдер и немного переделать, это уже не будет тем же самым слайдером.

ППС Уже можно было 5 раз свой слайдер сделать, нежели начинать спорить.

@Cdelphi78 · 18.12.2015, 12:31 **[ТС]**

И как его делать?

Добавлено через 37 секунд
Да по сути дело в не слайдере мне нужно картинки резиновыми сделать...

Добавлено через 48 секунд
Или переделать?

@Glart · 18.12.2015, 12:32

Сообщение от Cdelphi78

мне нужно картинки резиновыми

Резиновые на всю ширину родителя:

CSS
1
width:100%;

@Cdelphi78 · 18.12.2015, 12:51 **[ТС]**

Сообщение от Glart

width:100%;

Не работает

@Glart · 18.12.2015, 13:09

Сообщение от Cdelphi78

Не работает

У всех работает, а у вас не работает... Не находите в этом некую истину?

@Cdelphi78 · 18.12.2015, 13:17 **[ТС]**

А вы значит не хотите помочь?
И где у вас работает вы говорите?

@Glart · 18.12.2015, 13:20

Сообщение от Cdelphi78

А вы значит не хотите помочь?

Я и не только я уже вам помогли как только могли.

Сообщение от Cdelphi78

И где у вас работает вы говорите?

У меня везде работает. К чему эти вопросы? Помощь мне что ли нужна?

Продублирую возможное решение:

1. Подправить стили по моим рекомендациям. (вас не устроило)
2. Переделать текущий слайдер под свои нужны.
3. Написать новый слайдер под свои нужды.

@Cdelphi78 · 18.12.2015, 14:59 **[ТС]**

1 пункт - у вас рекомендация прописать width 100% я прописал не сработало.
2 пункт - я незнаю как его переделать

Добавлено через 35 минут
А ха ха тема почти напоминает эту) http://htmlforum.ru/index.php?showtopic=27838

Добавлено через 54 минуты
Очень странно, все темы которые я нашел в гугле без ответов, и у всех не работает width:100% что за ... как говориться)

@Glart · 18.12.2015, 15:09

Сообщение от Cdelphi78

и у всех не работает width:100%

Во всех темах написано "ОТНОСИТЕЛЬНО РОДИТЕЛЯ". Даже в той, что вы привели выше. Специально читал.

В этой теме я так же писал об этом!

Добавлено через 7 минут
1. Вот интерпретация вашего кода на пальцах: ТУТ
2. А вот моя интерпретация: ТУТ

Повозите влево вправо ширину окошка с красным прямоугольником.
1. Прямоугольник просто залезет за экран, либо останется не до конца окошка растянутым
2. Прямоугольник растянется или уменьшиться и всегда будет вписываться в окошко

Я уверен что у вас 1 не будет работать как надо, а 2й будет. Вы потратили на пустую болтавню пол дня. Уже можно было в космос слетать...

@Cdelphi78 · 18.12.2015, 15:11 **[ТС]**

У меня родитель эдемент списка li шириной 580px и все равно не работает(

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script>
var slideWidth = 980,
    sliderTimer, currentSlide = 0, len;
 
function nextSlide() {
    currentSlide++;
    if (currentSlide >= len) currentSlide = 0;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}
 
function prevSlide() {
    currentSlide--;
    if (currentSlide < 0) currentSlide = len - 1;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}
$(function() {
    len = $(".slidewrapper").children().length
    $(".slidewrapper").width(len * slideWidth);
    sliderTimer = setInterval(nextSlide, 3000);
    $("#slider").on({
        mouseenter: function() {
            clearInterval(sliderTimer)
        },
        mouseleave: function() {
            sliderTimer = setInterval(nextSlide, 3000)
        }
    });
    $("#next_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        nextSlide()
    });
    $("#prev_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        prevSlide()
    })
});
</script>
 
    <style>
   #slider  {
    width: 977px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(75, 77, 97,0.6);
}
 
 .slidewrapper{
    position: absolute;
    width:100%;
    height:100%;
    max-width:3000px;
    left: 0;
    top: 0;
    height: 300px;
    margin: 0;
    padding: 0;
 
}
 
 
.slidewrapper li {
 
    max-width:980px;
    height:auto;
    float:left;
    list-style-type: none;
 
}
 
#slider li img {
   width:100%;
   height:auto;
   display:block;
}
 
.slidewrapper .slide2 {
 
    float:left;
}
 
#slider .arrows {
    top:50%;
    text-decoration: none;
}
 
 
 
#slider #prev_slide {
    z-index: 10000;
    position: absolute;
    left:0;
    margin-top:-25px;
    font-size:40px;
}
 
 
#slider #next_slide {
    z-index: 10000;
    position: absolute;
    right:0;
    margin-top:-25px;
    font-size:40px;
}
 
 
 
    </style>
 </head>
<body>
    <div id="slider">
 
           <ul class="slidewrapper" data-current="0">
 
               <li class="slide1"><img src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
               <li class="slide2"><img src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
               <li class="slide3"><img src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
 
           </ul>
 <a href="javascript: void(0)" id="prev_slide" class="arrows"><</a>
<a href="javascript: void(0)" id="next_slide" class="arrows">></a>
 
 
           </div>
</body>
</html>

@Glart · 18.12.2015, 15:15

Сообщение от Cdelphi78

шириной 580px

Правильно вот картинка и растягивается на 100% от 580 = 580. Я это писал где-то в начале темы. Мы будем по кругу ходить или как?

Почему вы спорите, а не читаете рекомендации?

@Cdelphi78 · 18.12.2015, 15:24 **[ТС]**

Да я не спорю, я пытаюсь разобраться у меня не получается, до меня долго доходит, вы можете у меня в коде поправить потому что по вашему коду в две строчки конечно понятно все.

@Glart · 18.12.2015, 15:29

Сообщение от Cdelphi78

вы можете у меня в коде поправить

Вот с этого нужно было начинать тему.

А не с:

Сообщение от Cdelphi78

точнее картинки не уменьшаются, вроде прописал max-width и width 100% height auto

Вам ответили на то, что вы спрашивали.

Новые блоги и статьи Все статьи Все блоги /
Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 11:49
	Cdelphi78, Если вы хотите полностью написать слайдер значит вам не сюда) 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.12.2015, 12:31 [ТС]
	И как его делать? Добавлено через 37 секунд Да по сути дело в не слайдере мне нужно картинки резиновыми сделать... Добавлено через 48 секунд Или переделать? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.12.2015, 13:17 [ТС]
	А вы значит не хотите помочь? И где у вас работает вы говорите? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.12.2015, 14:59 [ТС]
	1 пункт - у вас рекомендация прописать width 100% я прописал не сработало. 2 пункт - я незнаю как его переделать Добавлено через 35 минут А ха ха тема почти напоминает эту) http://htmlforum.ru/index.php?showtopic=27838 Добавлено через 54 минуты Очень странно, все темы которые я нашел в гугле без ответов, и у всех не работает width:100% что за ... как говориться) 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.12.2015, 15:24 [ТС]
	Да я не спорю, я пытаюсь разобраться у меня не получается, до меня долго доходит, вы можете у меня в коде поправить потому что по вашему коду в две строчки конечно понятно все. 0