Вёрстка адаптивного слайдера

@Raideres · Регистрация: 29.10.2009

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

Может быть кто то может поделиться слайдером адаптивным. Высотой 300 а ширина будет в блоке до 1170, сверху стрелки две в квадратном блоке для пролистывания, слева текст а справа картинка все на белом фоне.

Примерно такой:

@fol · 16.10.2016, 15:45

вот, например, адаптивный слайдер, пункт Responsive Display (можно выставлять свои брэйкпойнты)

@Raideres · 17.10.2016, 08:17 **[ТС]**

я незнаю как такие квадратные кнопки перехода слайдера сделать и как затуханием например сделать...только тучусь

Добавлено через 24 минуты
http://owlgraphic.com я вот на этом эксперементирую

Добавлено через 18 минут
https://www.gosuslugi.ru/ вот подобная каруселька

@fol · 17.10.2016, 10:54

В аттаче html страница, рядом с ней css и js файлы от слайдера, инициализация перед закрывающим </body>. В опциях заданы брэйкпойнты 768 и 480 пкс, при первичной инициализации работает эффект fade, на 768 включается обычный свайп, на 480 опять работает fade. Немного css в head файла, ширину предлагаю подставить свою и поэкспериментировать. Еще раз сслыка на слайдер, там все опции, ивенты и т.д.
Ну, и сам аттач: slider.7z

@Raideres · 17.10.2016, 11:22 **[ТС]**

хех а я тут уже сам мудрю
вот

JavaScript
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
$(document).ready(function(){
      $('.responsive').slick({
  dots: false, //Показ/скрытие навигационных точек под слайдером
  fade: true,//Эффект затухания при перелистывании слайдов
  infinite: true,//Бесконечное прокручивание (зацикливание)
  autoplay:true,    //boolean   false   Автоматическая прокрутка
  autoplaySpeed:3000,   //int(ms)   3000    Скорость автопрокрутки в милисекундах
  speed: 300,//Скорость
  
  slidesToShow: 2,//количество слайдов, которые выводятся на экране
  slidesToScroll: 2,//количество слайдов, которые перелистываются за один раз
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2, //количество слайдов, которые выводятся на экране
        slidesToScroll: 2 //количество слайдов, которые перелистываются за один раз
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }
  ]
    });
});

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
<div class="row header-t">
            <div class="col-md-12">
                  <div class="responsive" style="width: auto; height:200px;">
                    <div>
                        <h1>Заголовок 1</h1>
                        <p>Описание текста1</p>
                        <a>Ссылка 4</a>
                    </div>
                    <div><img src="images/slider/1.jpg"/></div>
                   
                    <div>
                        <h1>Заголовок 2</h1>
                        <p>Описание текста2</p>
                        <a>Ссылка 4</a>
                    </div>
                    <div><img src="images/slider/2.jpg"/></div>
                    
                     <div>
                        <h1>Заголовок 3</h1>
                        <p>Описание текста3</p>
                        <a >Ссылка 4</a>
                    </div>
                    <div><img src="images/slider/3.jpg"/></div>
 
                     <div>
                        <h1>Заголовок 4</h1>
                        <p>Описание текста4</p>
                        <a>Ссылка 4</a>
                    </div>
                    <div><img src="images/slider/4.jpg"/></div>
                  </div>
            </div>
        </div><!--Конец Шапка-->

Добавлено через 53 секунды
как только ставлю затухание начинает исчезать картинка тоесть слева текст есть а справа картинки нет

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

@fol · 17.10.2016, 11:47

Для каждого слайдера, в том числе и для данного, нужно соблюсти html-структуру, иначе не будет работать. Для слика это обертка и внутренние блоки, т.е.

HTML5
1
2
3
4
5
<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

а внутри блоков вместо your content может быть что угодно

@Raideres · 17.10.2016, 12:29 **[ТС]**

а как стрелочки сделать как я на скриншоте показал?

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

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
        <div class="row " style="padding: 0px; margin: 0px;">
            <div class="col-md-12">
                <div class="responsive" style="width: auto; height:300px;">
                    <div><!--1--> 
                       <div class="row">
                            <div class="col-md-6">
                               <h2>Заголовок 1</h1>
                               <p>Описание текста1</p>
                               <a>Ссылка 1</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/1.jpg"/>
                            </div>
                       </div>
                    </div>
                    <div><!--2--> 
                       <div class="row">
                            <div class="col-md-6">
                               <h2>Заголовок 2</h2>
                               <p>Описание текста2</p>
                               <a>Ссылка 2</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/2.jpg"/>
                            </div>
                       </div>
                    </div>
                    <div><!--3--> 
                       <div class="row">
                            <div class="col-md-6">
                              
 
                               <h1>Заголовок 3</h1>
                               <p>Описание текста3</p>
                               <a>Ссылка 3</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/3.jpg"/>
                            </div>
                       </div>
                    </div>
                    <div><!--4--> 
                       <div class="row">
                            <div class="col-md-6">
                               <h1>Заголовок 4</h1>
                               <p>Описание текста4</p>
                               <a>Ссылка 4</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/4.jpg"/>
                            </div>
                       </div>
                    </div>
                </div>
             </div>
        </div><!--Конец Шапка-->

Добавлено через 1 минуту
просьба с css поправьте как правильно и html думаю я не так написал

@fol · 17.10.2016, 13:21

обертке слайдера

CSS
1
position: relative;

левой стрелке

CSS
1
2
3
position: absolute;
top: 20px;
left: 20px;

правой стрелке

CSS
1
2
3
position: absolute;
top: 20px;
left: 40px;

и в опциях слайдера, чтобы цифры заменить на стрелки, надо указать

JavaScript
1
2
prevArrow : '<button type="button" class="slick-prev">&lt;</button>',
nextArrow : '<button type="button" class="slick-next">&gt;</button>'

само собой, стили подправить под себя

@Raideres · 17.10.2016, 17:29 **[ТС]**

вот сделал как вы сказали в итоге стрелок нет=(((

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
<!--ШАПКА-->
        
        <div class="row " style="padding: 0px; margin: 0px;">
            <div class="col-md-12" style="margin:0px">
                <div class="responsive" style="width: auto; height:300px; position: relative;">
                    <div><!--1--> 
                       <div class="row">
                            <div class="col-md-6">
                               <h2>Заголовок 1</h1>
                               <p>Описание текста1</p>
                               <a>Ссылка 1</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/1.jpg"/>
                            </div>
                       </div>
                    </div>
                    <div><!--2--> 
                       <div class="row">
                            <div class="col-md-6">
                               <h2>Заголовок 2</h2>
                               <p>Описание текста2</p>
                               <a>Ссылка 2</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/2.jpg"/>
                            </div>
                       </div>
                    </div>
                    <div><!--3--> 
                       <div class="row">
                            <div class="col-md-6">
                              
 
                               <h1>Заголовок 3</h1>
                               <p>Описание текста3</p>
                               <a>Ссылка 3</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/3.jpg"/>
                            </div>
                       </div>
                    </div>
                    <div><!--4--> 
                       <div class="row">
                            <div class="col-md-6">
                               <h1>Заголовок 4</h1>
                               <p>Описание текста4</p>
                               <a>Ссылка 4</a>
                            </div>
                            <div class="col-md-6">
                                <img style="margin: 0px; width: auto; height: 300px;" align="right" src="images/slider/4.jpg"/>
                            </div>
                       </div>
                    </div>
                </div>
             </div>
        </div><!--Конец Шапка-->

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*Слайдер*/
.slick-prev{
 position: absolute;
top: 20px;
left: 20px;   
}
 
.slick-prev{
 position: absolute;
top: 20px;
left: 40px;   
}
 
/*конец слайдера*/

JavaScript
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
$(document).ready(function(){
      $('.responsive').slick({
  dots: false, //Показ/скрытие навигационных точек под слайдером
  fade: true,//Эффект затухания при перелистывании слайдов
  infinite: true,//Бесконечное прокручивание (зацикливание)
  autoplay:true,    //boolean   false   Автоматическая прокрутка
  autoplaySpeed:3000,   //int(ms)   3000    Скорость автопрокрутки в милисекундах
  speed: 300,//Скорость
  prevArrow : '<button type="button" class="slick-prev">&lt;</button>',
  nextArrow : '<button type="button" class="slick-next">&gt;</button>',
 
  slidesToShow: 1,//количество слайдов, которые выводятся на экране
  slidesToScroll: 1,//количество слайдов, которые перелистываются за один раз
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1, //количество слайдов, которые выводятся на экране
        slidesToScroll: 1 //количество слайдов, которые перелистываются за один раз
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
    });
});

@fol · 17.10.2016, 17:34

стрелкам z-index:2

@Raideres · 17.10.2016, 18:05 **[ТС]**

все равно нет

@fol · 17.10.2016, 18:16

1. Кнопки на месте, просто они белого цвета на белом фоне. Обеим кнопкам задать background-color: #Любой цвет, чтобы их увидеть.
2. .slick-prev в файле стилей 2 раза. Надо один заменить на slick-next

@Raideres · 18.10.2016, 08:23 **[ТС]**

остался единственный вопросик тупой

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="row">
    <div class="col-md-6">
        <h1>Заголовок 4</h1>
        <p>Описание текста4</p>
        <a>Ссылка 4</a>
    </div>
    <div class="col-md-6">
        <img style="margin: 0px; width: auto; height: 300px;" align="right" src="https://www.cyberforum.ru/images/slider/4.jpg"/>
    </div>
</div>

блок где контент как нибудь помогите отформатировать посередине и хз мб блок для текста какой то сделать

Добавлено через 7 минут
текст выравниваю картинка едет

@fol · 18.10.2016, 10:49

CSS
1
2
3
.responsive .slick-slide{
   text-align: center;
}

так надо?

@Raideres · 18.10.2016, 12:26 **[ТС]**

не по горизонтали центрировать
а по вертикали

@Raideres · 18.10.2016, 12:31 **[ТС]**

вот

@fol · 18.10.2016, 12:54

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

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="row">
* * <div class="col-md-6">
* * * * <h1>Заголовок 4</h1>
* * * * <p>Описание текста4</p>
* * * * <a>Ссылка 4</a>
* * </div>
* * <div class="col-md-6">
* * * * <img style="margin: 0px; width: auto; height: 300px;" align="right" src="https://www.cyberforum.ru/images/slider/4.jpg"/>
* * </div>
</div>

CSS
1
2
3
4
5
6
.responsive .slick-slide .col-md-6{
  display: inline-block;
  float: none;
  vertical-align: middle;
  width: 49%;
}

@Raideres · 18.10.2016, 15:26 **[ТС]**

вот что вышло но чтот дизайн вообще стремный у меня выходит посмотрите пожалуйста мб что то вы еще сможете поправить

@Raideres · 18.10.2016, 15:26 **[ТС]**

мб какие то советы дадите

@fol · 18.10.2016, 15:40

на счет чего советы? конкретные вопросы - конкретные ответы

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Raideres 1 / 1 / 2 Регистрация: 29.10.2009 Сообщений: 211

	Вёрстка адаптивного слайдера 16.10.2016, 13:39. Показов 4520. Ответов 22 Метки нет (Все метки) Может быть кто то может поделиться слайдером адаптивным. Высотой 300 а ширина будет в блоке до 1170, сверху стрелки две в квадратном блоке для пролистывания, слева текст а справа картинка все на белом фоне. Примерно такой: Миниатюры 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	16.10.2016, 15:45
	вот, например, адаптивный слайдер, пункт Responsive Display (можно выставлять свои брэйкпойнты) 0

@Raideres 1 / 1 / 2 Регистрация: 29.10.2009 Сообщений: 211
	17.10.2016, 08:17 [ТС]
	я незнаю как такие квадратные кнопки перехода слайдера сделать и как затуханием например сделать...только тучусь Добавлено через 24 минуты http://owlgraphic.com я вот на этом эксперементирую Добавлено через 18 минут https://www.gosuslugi.ru/ вот подобная каруселька 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	17.10.2016, 10:54
	В аттаче html страница, рядом с ней css и js файлы от слайдера, инициализация перед закрывающим </body>. В опциях заданы брэйкпойнты 768 и 480 пкс, при первичной инициализации работает эффект fade, на 768 включается обычный свайп, на 480 опять работает fade. Немного css в head файла, ширину предлагаю подставить свою и поэкспериментировать. Еще раз сслыка на слайдер, там все опции, ивенты и т.д. Ну, и сам аттач: slider.7z 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	17.10.2016, 17:34
	стрелкам z-index:2 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	17.10.2016, 18:16
	1. Кнопки на месте, просто они белого цвета на белом фоне. Обеим кнопкам задать background-color: #Любой цвет, чтобы их увидеть. 2. .slick-prev в файле стилей 2 раза. Надо один заменить на slick-next 0

@Raideres 1 / 1 / 2 Регистрация: 29.10.2009 Сообщений: 211
	18.10.2016, 12:26 [ТС]
	не по горизонтали центрировать а по вертикали 0

@Raideres 1 / 1 / 2 Регистрация: 29.10.2009 Сообщений: 211
	18.10.2016, 12:31 [ТС]
	вот Миниатюры 0

@Raideres 1 / 1 / 2 Регистрация: 29.10.2009 Сообщений: 211
	18.10.2016, 15:26 [ТС]
	мб какие то советы дадите 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	18.10.2016, 15:40
	на счет чего советы? конкретные вопросы - конкретные ответы 0

Вёрстка адаптивного слайдера

Решение