Slick слайдер карусель

18.12.2020, 22:29. Показов 1268. Ответов 0

Метки нет (Все метки)

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

Всем здравствуйте. Помогите разобраться.. Пол дня голову ломаю. Мне нужен слайдер карусель. Чтобы в слайде было по 4 картинки, а листалось по 2. Всего картинок 7. И листаться должно в одну сторону бесконечно и без перескакиваний. Задача простая, но листается с глюком.. Я для простоты вопроса сделал такой код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<div class="container-slick">
 
    <div class="slide"> 1 </div>
    <div class="slide"> 2 </div>
    <div class="slide"> 3 </div>
    <div class="slide"> 4 </div>
    <div class="slide"> 5 </div>
    <div class="slide"> 6 </div>
    <div class="slide"> 7 </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{ 
    box-sizing: border-box;
    font-size: 19pt;
    font-weight: bold;
}
.container-slick{
    border: 2px solid;
    height:100px;
    width: 75%;
    margin: auto;
}
 
.slide {
   display: block;
   height: 95px;
 
   border: 2px blue solid;
}
 .slick-prev, .slick-next {
    background-color: black !important;
}

JavaScript
1
2
3
4
5
6
7
8
 jQuery(document).ready(function(){
  jQuery('.container-slick').slick(
        {
            slidesToShow: 4,
            slidesToScroll: 2,
            infinite: true  
 });
});

Итак.. видим 4 кубика - 1 2 3 4, листаем вправо - 3 4 5 6, листаем еще - 5 6 7 1, всё как надо, а далее должно 7 1 2 3, НО 4 5 6 7.. почему? а далее 1 2 3 4.... что я делаю не так....

Добавлено через 2 часа 23 минуты
https://jsfiddle.net/prizrak067/fmr92ash/26/

в песочнице все наглядно

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

18.12.2020, 22:29

Ответы с готовыми решениями:

Слетает плагин слайдер (slick) на мобильном телефоне
Здравствуйте. Не могу разобраться, почему происходит следующая вещь: на мобильном телефоне полностью слетает ширина для блоков у слайдера...

При переключении слайдеров в slick слайдер съезжает блок
Установила два слайда с помощью slick слайдера, которые переключаются между собой при нажатии на ссылку выше. При переключении с одно...

Не работает script слайдер карусель, почему?
html код <head> <link rel="stylesheet" href="style.css" type="text/css"/> <title> Dream-mam - Беременность, Роды, Ребенок, Дети,...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

18.12.2020, 22:29

Помогаю со студенческими работами здесь

Адаптивный слайдер типа Карусель начинает работать только при изменении окна браузера
Уважаемые коллеги! Прошу помощи. Установила адаптивный слайдер типа Карусель. Сайт сделан на Drupal Есть проблема: слайдер начинает...

Слайдер slick
Имеется слайдер slick, в котором 7 слайдов. Этот слайдер почему-то не работает, если в параметрах указать ему прокручивать все 7 слайдов....

Не работает слайдер slick.js
Не работает слайдер, не могу понять в чём причина Примеры кода: <!DOCTYPE html> <html lang="en"> <head>...

Слайдер slick в табами JQuery UI
Добрый вечер, есть табы от JQuery UI и в каждом табе есть по слайдеру slick. При клике на неактивный таб, слайдер slick ломается. Решается...

слайдер карусель
Здравствуйте, делаю слайдер на сайт через скаченный bxslider. Должен получиться следующего типа: Но не получается сделать подписи к...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

Наверх