Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Установка slick slider на ваш сайт

slick slider

Здравствуйте, хочу рассказать Вам о слайдере slick slider для сайта который показал себя как легкий, универсальный и простой в установке. На нем можно реализовать все что связано со слайдерами и каруселями. Как заявляет создатель плагин «the last carousel you’ll ever need», что можно трактовать как единственная универсальная карусель которая подойдет для любой вашей задумки. И это действительно так. Чего только в ней нету, от обычного слайдера до адаптивной карусели с слайдами в несколько рядов.

Плагин можно спокойно брать на вооружение как начинающим так и опытным веб разработчикам. Это очень сильный конкурент всем знакомого bxslider. Из коробки мы получаем очень многозадачный инструмент.

Чтобы установить слайдер / карусель к себе на сайт достаточно пройти 3 простых шага.

Установка slick slider

Пример №1 (Слайдер)

1. Шаг  — Подключение скрипта и стилей плагина.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Подключать нужно между тегами <head></head> вашей html страницы.

2. Шаг — вставка самого html кода слайдера.

<div class="your-class">
  <div><img src="http://via.placeholder.com/725x300" alt=""></div>
  <div><img src="http://via.placeholder.com/725x300" alt=""></div>
  <div><img src="http://via.placeholder.com/725x300" alt=""></div>
</div>

Этот код нужно вставить между тегами <body></body>, в том месте где вы хотите отобразить сам слайдер.

3. Шаг — инициализация слайдера.

<script type="text/javascript">
  $(document).ready(function(){
    $('.your-class').slick();
  });
</script>

Подключать нужно между тегами <head></head> вашей html страницы, но после кода, который Вы вставляли в шаге №1

На этом примере мы показали как нужно устанавливать slick slider как карусель с одним основным слайдом.

Ниже можете посмотреть наглядный пример то что описано выше.

Пример №2(Карусель)

Чтобы установить карусель надо сделать все тоже самое что и в предыдущем описании, но шаг №2 и шаг №3 немного изменим.

2. Шаг — вставка самого html кода слайдера.

<div class="your-class">
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300" alt=""></div>
  <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>

Этот код нужно вставить между тегами <body></body>, в том месте где вы хотите отобразить сам слайдер.

3. Шаг — инициализация слайдера.

<script>
$(document).ready(function(){
  $('.your-class').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
</script>

А в этом примере мы использовали slick slider как карусель (с 3 основным слайдами) и для этого мы использовали некоторые настройки плагина.

Посмотреть работу этой карусели можете на примере ниже.

Как видите всего 3 шага и вы получите карусель или слайдер для ваших нужд. Но возможностей и настроек этого слайдера очень много. Если у Вас возникли трудности либо есть вопросы то задавайте их в комментарии и я постараюсь бистро на них ответить.