Режим центрирования слайда для Slick Slider?

Question

Тёма Ти @Tyoma_Ti

Режим центрирования слайда для Slick Slider?

Друзья, можете кинуть готовый HTML/CSS/JS код для Slick Slider с режимом центрирования одного слайда?
Никак не могу найти полный код. То есть HTML/CSS, но нет JS, то есть JS, но нет CSS, то ещё чего-то не хватает.
К примеру вот здесь такой слайдер показан, и даже есть js-код, но нет ничего остального. И если вытянуть HTML я могу, то CSS не получается.
Я новичок в этом деле, поэтому самому пока сложно разбираться. Заранее спасибо!

Вопрос задан более трёх лет назад
1633 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

9 комментариев

Тёма Ти @Tyoma_Ti Автор вопроса

Как раз на официальной странице ничего не понятно. Там есть всё то же, что и вы написали. Но если это загрузить к примеру на jsfiddle, ничего не работает. Вот ваш код: https://jsfiddle.net/9h327pgq/
А мне хочется, чтобы было примерно так: https://jsfiddle.net/csL9z6x7/

Написано более трёх лет назад
Alams Stoyne @alams_stoyne

Тёма Ти, Что именно в документации вам непонятно?

snippet

Всё остальное делается стилями CSS

Написано более трёх лет назад
Тёма Ти @Tyoma_Ti Автор вопроса

Alams Stoyne, в том виде, в котором кинули вы, стало понятнее. Спасибо. А в официальной документации только скрипты. Ни html, ни css там нет. Поэтому и не могу разобраться.

Написано более трёх лет назад
Тёма Ти @Tyoma_Ti Автор вопроса

Alams Stoyne, и ещё вопрос. Я так понял, редактировать кнопки Next/Previous можно только в скачанных исходниках?

Написано более трёх лет назад

Alams Stoyne @alams_stoyne

Тёма Ти, на странице документации есть "Getting Started" там все описано как подключить.
Что касается кнопок Вы сами можете определить выводить или нет кнопки и точки а так же задать классы или элементы которые будут кнопками Next/Previous всё это есть в Settings - читайте изучайте.

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

$('.block_brand .slider-items').slick({
			autoplay: false,
			arrows: true,
			autoplaySpeed: 3000,
			adaptiveHeight: false,
			dots: true,
			slidesToShow: 4,
			slidesToScroll: 1,			
			dotsClass: 'nav slide-dots',
			prevArrow: '<li class="nav-item mr-auto prev border-light-r text-center"></li>',
			nextArrow: '<li class="nav-item ml-auto next border-light-l text-center"></li>',	
			appendArrows: '.block_brand .slider-navigation',		
			appendDots: '.block_brand .slider-navigation',
			responsive: [{
					breakpoint: 1025,
					settings: {
						arrows: true,
						slidesToShow: 4,
						slidesToScroll: 1
					}
				},{
					breakpoint: 768,
					settings: {						
						arrows: false,
						slidesToShow: 1,
						slidesToScroll: 1
					}
				}]			
		});

Написано более трёх лет назад

Тёма Ти @Tyoma_Ti Автор вопроса

Alams Stoyne, и ещё вопрос, если не трудно. Хочу поставить на странице два Slick слайдера. Один работает прекрасно, а второй криво, т. к. у них общие стили, заложенные в CSS по ссылке. Как сделать так, чтобы оба работали независимо и чтобы для каждого можно было настроить свои стили. Заранее спасибо!

Написано более трёх лет назад

Alams Stoyne @alams_stoyne

Тёма Ти,

<div class="my-slider1 slider-style-1">
  <div class="item-slide">SLIDE 1</div>
  <div class="item-slide">SLIDE 2</div>
  <div class="item-slide">SLIDE 3</div>
  <div class="item-slide">SLIDE 4</div>
  <div class="item-slide">SLIDE 5</div>
  <div class="item-slide">SLIDE 6</div>
</div>

<div class="my-slider2 slider-style-2">
  <div class="item-slide">SLIDE 1</div>
  <div class="item-slide">SLIDE 2</div>
  <div class="item-slide">SLIDE 3</div>
  <div class="item-slide">SLIDE 4</div>
  <div class="item-slide">SLIDE 5</div>
  <div class="item-slide">SLIDE 6</div>
</div>

$(document).ready(function(){
  $('.my-slider').slick({
    slidesToShow: 3,
  });
  $('.my-slider2').slick({
    slidesToShow: 1,
  });
});

.slider-style-1 .item-slide{
  background: #CCC;
}
.slider-style-2 .item-slide{
  background: #000;
}

Ну как-то так например, в целом всё просто :) 2 слайдера разные стили и разная инициализация (могут быть свои настройки)

У меня порой до 3-4 различных слайдеров на одной странице бывает (1 - большой в 1 слайд, 2 лента новостей/отзывов, 3 популярные товары, 4 фото)

Кстати отметьте мой ответ решением на ваш вопрос если не трудно ;)

Написано более трёх лет назад

Тёма Ти @Tyoma_Ti Автор вопроса
Alams Stoyne, насколько я понимаю, тут всё равно нужно вручную прописывать стили для каждого слайдера в отдельности. Но в линке ведь стоит ссылка на ОДИН файл стилей
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

Что делать в таком случае? Скачивать этот файл на компьютер, и в нём уже вручную всё менять? Я вот это не могу понять.
Написано более трёх лет назад
Alams Stoyne @alams_stoyne

Тёма Ти,
- Это базовые стили чтобы слайдер корректно работал.
Для того чтобы задать стиль слайдерам вы и заводите классы.

Советую изучить базовые азы по верстке HTML+CSS тогда таких вопросов не возникнет

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 6 часов назад
- 76 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 6 часов назад
- 88 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 20 часов назад
- 74 просмотра
1

ответ
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 22 часа назад
- 72 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 56 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- вчера
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- 16 апр.
- 113 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать телеграмм бота для анонимных сообщений

19 апр. 2024, в 14:53

30000 руб./за проект

Разработать парсер и админку

19 апр. 2024, в 14:12

30000 руб./за проект

Создать логотип

19 апр. 2024, в 14:10

500 руб./за проект

Answer 1 · 2019-10-29 11:37:59

Качаем
или подключаем с CDN

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Не забудь предварительно подключить jQuery например так:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Дальше HTML слайдера

<div class="my-slider">
  <div class="item-slide">SLIDE 1</div>
  <div class="item-slide">SLIDE 2</div>
  <div class="item-slide">SLIDE 2</div>
</div>

Дальше JavaScript

<script type="text/javascript">
    $(document).ready(function(){
      $('.my-slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  autoplay: true,
  autoplaySpeed: 2000,
      });
    });
  </script>

А вообще учи английский и смотри официальную документацию

Там всё просто и понятно - будут вопросы пиши.

Режим центрирования слайда для Slick Slider?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт