Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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 шага и вы получите карусель или слайдер для ваших нужд. Но возможностей и настроек этого слайдера очень много. Если у Вас возникли трудности либо есть вопросы то задавайте их в комментарии и я постараюсь бистро на них ответить.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X