Слайдер для сайта

Слайдер для сайта - нужен! И раз вы это читаете, то тема выбора слайдера для вас актуальна. В этом посте я хочу поделиться интересным jQuery плагином слайдера для сайта.

Итак прошу любить и жаловать - OWL Carousel.

Преимущества этого слайдера для сайта

  1. Поддерживает касание и перетягивание слайдов на мобильных устройствах;
  2. Адаптивный под разную ширину;
  3. Может быть использован для создания по-слайдовой прокрутки, так и для карусели (отображение сразу нескольких элементов в ряд);
  4. Можно применить к сразу нескольким элементам на одной странице;
  5. Имеет множество опций и настроек;
  6. И последнее но не маловажное имеет относительно малый размер в отличии от других плагинов 🙂

Раз с положительными сторонами слайдера для сайта мы разобрались, давайте пройдем все пункты для его запуска.

1. Скачать архив слайдера для сайта

В данном архиве вы найдете массу примеров реализации слайдеров и каруселей.
А файлы которые нужны для создания собственного слайдера на сайт хранятся в папочке owl-carousel.
Раскидываем их по папкам в вашем проекте, стили и картинки в css, а скрипты соответственно в - js.

2. Подключаем файлы слайдера к сайту

Тут по традиции прописываем пути к стилям и скрипту слайдера в блоке head.

<head>
	<meta charset="UTF-8">
	<title>Slider для сайта</title>
	<link rel="stylesheet" href="css/owl.carousel.css">
	<link rel="stylesheet" href="css/owl.theme.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/owl.carousel.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>

Создаем html структуру нашего слайдера

Структура на удивление простая, общий контейнер внутри которого каждый слайд в отдельном блоке:

<div id="slider">
	<div class="slide"><img src="images/01.jpg" alt="Image Description"></div>
	<div class="slide"><img src="images/02.jpg" alt="Image Description"></div>
	<div class="slide"><img src="images/03.jpg" alt="Image Description"></div>
</div>

Подключаем плагин слайдера

$(document).ready(function(){
    $("#slider").owlCarousel({
          navigation : true, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem:true
    });
});

Вот и все, на этом работа по запуску слайдера на сайте завершена.

В этом посте я не стал описывать все возможные опции и их применение при реализации слайдера для сайта, т.к. все подробно описано на официальном сайте проекта:

Если у вас появятся вопросы по применению этого плагина или что-то не будет получатся при установки слайдера на свой проект, пишите в комментарии к этому посту, буду рад помочь!

(4 голосов. Рейтинг: 4,00 из 5)
Загрузка...

Метки: , , , , ,

Рубрика: jQuery

Комментарии (21)

| RSS комментария

  1. Александр:

    Хороший сайт! Много полезной информации. Нравится еще то, что многие моменты, которые раньше хранил в голове, есть здесь. Сразу скачал шпаргалки по CSS3 и HTML5. Добавил в закладки.
    Такой вопрос: давно работаю с этим плагином. Решил сделать полноэкранную карусель с одним слайдом в видимой части. Не стал использовать тег для подгрузки разного размера изображений, так как поддержка слабенькая. Сайт адаптивный. Скармливать всем картинки высокого разрешения – жалко мобильную аудиторию с медленным Интернетом. Решил “растягивать” изображения плагином liCover (//masscode.ru/index.php/k2/item/45-lifullsize). Использую его обычно для полноэкранных бэкграундов. Инициализирую сперва карусель, а потом колл-бэком запускаю liCover, чтобы он картинку подогнал под уже сформированный родительский блок. НЕ РАБОТАЕТ! Что только не пробовал.
    Как считаете, что нужно сделать, чтобы их сопрячь?
    P. S.: такая же песня была при соединении Masonry и Infinity Scroll’a.

    • Дмитрий Британ:

      Здравствуйте, Александр! Спасибо за ваш комментарий.
      А зачем вы растягиваете картинку отдельным плагином, стили на 100% по ширине дают не тот результат?
      Вот пример слайдера на всю ширину экрана: ссылка.

      Возможно я не совсем правильно понял вашу задачу, по-этому жду вашего комментария 🙂

  2. Александр:

    Видимо, да, Вы меня немного не поняли.
    Если управлять изображением через CSS, то ширина и высота изменяются пропорционально, так как Width:100%, а Height: auto. Если изменить размер окна, то изображением “съедет” по высоте, а мне нужно, чтобы оно равномерно заполняло собой весь блок, ширина и высота которого всегда 100%. Вот я и использую плагин для “растяжки”.
    Написал разработчику плагина – он мне ничего дельного не написал, мол, ищите проблему в родительском блоке. Разобрался я – нужно было просто написать функцию после дефолтной команды Owl Carousel “afterUpdate”. Все работает. Знаете, что вышла новая бета-версия карусели? Ее можно еще больше кастомизировать.
    Сейчас вот делаю к слайд-шоу счетчик слайдов по принципу: 1/100.
    Написал сайт на чистом CSS3, теперь приходится “париться” с Modernizr для олд-скульных браузеров.

    Извиняюсь, что не по теме: а как Вы относитесь к SVG?

    • Дмитрий Британ:

      К сожалению по SVG я не могу вам ничего сказать, т.к. не работал и не изучал эту технологию построения графики.

  3. Дмитрий:

    Здравствуйте! Прекрасный сайт, все толково написано, приятно читать. Вопрос по поводу автоматического перелистывания слайдов. Как можно это реализовать?

    • Дмитрий Британ:

      Здравствуйте, Дмитрий!
      Для автоматической прокрутки, можно прописать параметр для метода:

      $("#owl-example").owlCarousel({
      //Autoplay
      autoPlay : true
      });

      • Дмитрий:

        Я извиняюсь, я новичек, где нужно вписать этот код? Вписывал во всех документах методом “тыка”, не получается.

        • Дмитрий Британ:

          Добрый день!
          Скачайте архив с исходником для данного поста.
          В архиве будет файл script.js, в нем пример кода задействования самого скрипта слайдера, вот там и нужно добавить одну строку, с параметром autoPlay : true
          т.е. должно быть что-то такое:

          $(document).ready(function(){
              $("#slider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    slideSpeed : 300,
                    paginationSpeed : 400,
                    singleItem:true,
                    autoPlay : true
              });
          });
          
  4. Ирина:

    Здравствуйте, Дмитрий!
    Благодаря вашему сайту мне удалось наконец установить слайдер.
    Спасибо за что внятное изложение куда какую часть кода подключать.
    К сожалению пока у меня нет базовых знаний по jQuery, но хотелось
    бы реализовать автоматическую прокрутку.
    У вас здесь есть подсказка, но пока не понимаю как ею воспользоваться:
    $(“#owl-example”).owlCarousel({
    //Autoplay
    autoPlay : true
    });
    Не могли бы вы помочь мне практически прописать скрипт непосредственно в индексном файле? Это тот случай, когда лучше один раз увидеть.
    Мой файл://yadi.sk/d/-RJHHfzNfHqXZ

  5. Олег:

    Здравствуйте, Дмитрий.
    Посмотрел вашу инструкцию по этому слайдеру и несколько других. Во всех непонятно, куда (в какие файлы на сайте) вписывать эти коды. Интересует конкретно WordPress. Замучился совсем с этим слайдером, но понимаю, что вроде бы это именно то, что мне нужно. Помогите разобраться пожалуйста!

    • Дмитрий Британ:

      Здравствуйте, Олег.
      Возможно вам стоит посмотреть в сторону плагина для вордпресс //wordpress.org/plugins/owl-carousel/, думаю с ним вы разберетесь и работать будет более удобно чем интегрировать самому 🙂

  6. Петя:

    Спасибо! Очень удобно и все понятно расписано! Большое спасибо, еще раз

  7. Aleksandra:

    Здравствуйте. Спасибо, замечательный урок. Подскажите пожалуйста, как можно изменить надпись на кнопках next и prev?

  8. Алексей:

    Здравствуйте. Установил слайдер, добавил автопрокрутку, как написано в комментариях но теперь интересует возможно ли изменять интервал автоматического перелистывания?

  9. Алексей:

    Все уже разобрался, если вместо “autoPlay : true” прописать, например, “autoPlay : 10000”, то перелистывание будет происходить каждые 10 сек. По умолчанию перелистывание происходило каждые 5 сек.

    • Дмитрий Британ:

      Супер! Рад за Вас, что получилось разобраться самостоятельно 🙂

  10. Анатолий:

    Здравствуйте.

    Возможно ли как-то сделать слайдер не только для изображений, но и для текста. Т.е. в одном слайде слева должна быть картинка, а справа текст (не на самой картинке). Слайд должен быть не на всю ширину экрана, а примерно наполовину. Следующий слайд не виден до нажатия на кнопку прокрутки.

    Спасибо 🙂

Оставьте свой комментарий