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

Question

[Тёма Ти]

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

Answer 1

[Alams Stoyne]

Качаем
или подключаем с 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>

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

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

Comments

[Тёма Ти]

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

[Alams Stoyne]

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



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

[Тёма Ти]

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

[Тёма Ти]

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

[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
					}
				}]			
		});

[Тёма Ти]

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

[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 фото)

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

[Тёма Ти]

Alams Stoyne, насколько я понимаю, тут всё равно нужно вручную прописывать стили для каждого слайдера в отдельности. Но в линке ведь стоит ссылка на ОДИН файл стилей

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

Что делать в таком случае? Скачивать этот файл на компьютер, и в нём уже вручную всё менять? Я вот это не могу понять.

[Alams Stoyne]

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

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