Слайдер для сайта
Слайдер для сайта - нужен! И раз вы это читаете, то тема выбора слайдера для вас актуальна. В этом посте я хочу поделиться интересным jQuery плагином слайдера для сайта.
Итак прошу любить и жаловать - OWL Carousel.
Преимущества этого слайдера для сайта
- Поддерживает касание и перетягивание слайдов на мобильных устройствах;
- Адаптивный под разную ширину;
- Может быть использован для создания по-слайдовой прокрутки, так и для карусели (отображение сразу нескольких элементов в ряд);
- Можно применить к сразу нескольким элементам на одной странице;
- Имеет множество опций и настроек;
- И последнее но не маловажное имеет относительно малый размер в отличии от других плагинов 🙂
Раз с положительными сторонами слайдера для сайта мы разобрались, давайте пройдем все пункты для его запуска.
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
Подписаться
Понравилась статья, подпишись и получи больше хорошего материала.
Хороший сайт! Много полезной информации. Нравится еще то, что многие моменты, которые раньше хранил в голове, есть здесь. Сразу скачал шпаргалки по CSS3 и HTML5. Добавил в закладки.
Такой вопрос: давно работаю с этим плагином. Решил сделать полноэкранную карусель с одним слайдом в видимой части. Не стал использовать тег для подгрузки разного размера изображений, так как поддержка слабенькая. Сайт адаптивный. Скармливать всем картинки высокого разрешения – жалко мобильную аудиторию с медленным Интернетом. Решил “растягивать” изображения плагином liCover (//masscode.ru/index.php/k2/item/45-lifullsize). Использую его обычно для полноэкранных бэкграундов. Инициализирую сперва карусель, а потом колл-бэком запускаю liCover, чтобы он картинку подогнал под уже сформированный родительский блок. НЕ РАБОТАЕТ! Что только не пробовал.
Как считаете, что нужно сделать, чтобы их сопрячь?
P. S.: такая же песня была при соединении Masonry и Infinity Scroll’a.
Здравствуйте, Александр! Спасибо за ваш комментарий.
А зачем вы растягиваете картинку отдельным плагином, стили на 100% по ширине дают не тот результат?
Вот пример слайдера на всю ширину экрана: ссылка.
Возможно я не совсем правильно понял вашу задачу, по-этому жду вашего комментария 🙂
Видимо, да, Вы меня немного не поняли.
Если управлять изображением через CSS, то ширина и высота изменяются пропорционально, так как Width:100%, а Height: auto. Если изменить размер окна, то изображением “съедет” по высоте, а мне нужно, чтобы оно равномерно заполняло собой весь блок, ширина и высота которого всегда 100%. Вот я и использую плагин для “растяжки”.
Написал разработчику плагина – он мне ничего дельного не написал, мол, ищите проблему в родительском блоке. Разобрался я – нужно было просто написать функцию после дефолтной команды Owl Carousel “afterUpdate”. Все работает. Знаете, что вышла новая бета-версия карусели? Ее можно еще больше кастомизировать.
Сейчас вот делаю к слайд-шоу счетчик слайдов по принципу: 1/100.
Написал сайт на чистом CSS3, теперь приходится “париться” с Modernizr для олд-скульных браузеров.
Извиняюсь, что не по теме: а как Вы относитесь к SVG?
К сожалению по SVG я не могу вам ничего сказать, т.к. не работал и не изучал эту технологию построения графики.
Здравствуйте! Прекрасный сайт, все толково написано, приятно читать. Вопрос по поводу автоматического перелистывания слайдов. Как можно это реализовать?
Здравствуйте, Дмитрий!
Для автоматической прокрутки, можно прописать параметр для метода:
$("#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 }); });Здравствуйте, Дмитрий!
Благодаря вашему сайту мне удалось наконец установить слайдер.
Спасибо за что внятное изложение куда какую часть кода подключать.
К сожалению пока у меня нет базовых знаний по jQuery, но хотелось
бы реализовать автоматическую прокрутку.
У вас здесь есть подсказка, но пока не понимаю как ею воспользоваться:
$(“#owl-example”).owlCarousel({
//Autoplay
autoPlay : true
});
Не могли бы вы помочь мне практически прописать скрипт непосредственно в индексном файле? Это тот случай, когда лучше один раз увидеть.
Мой файл://yadi.sk/d/-RJHHfzNfHqXZ
Здравствуйте, Дмитрий.
Посмотрел вашу инструкцию по этому слайдеру и несколько других. Во всех непонятно, куда (в какие файлы на сайте) вписывать эти коды. Интересует конкретно WordPress. Замучился совсем с этим слайдером, но понимаю, что вроде бы это именно то, что мне нужно. Помогите разобраться пожалуйста!
Здравствуйте, Олег.
Возможно вам стоит посмотреть в сторону плагина для вордпресс //wordpress.org/plugins/owl-carousel/, думаю с ним вы разберетесь и работать будет более удобно чем интегрировать самому 🙂
Спасибо! Очень удобно и все понятно расписано! Большое спасибо, еще раз
Пожалуйста 🙂
Здравствуйте. Спасибо, замечательный урок. Подскажите пожалуйста, как можно изменить надпись на кнопках next и prev?
Там есть опция воспользуйтесь ею:
navigationText [“prev”,”next”] array You can cusomize your own text for navigation. To get empty buttons use navigationText : false. Also HTML can be used here
Спасибо, добрый человек! Долго не мог найти.
Пожалуйста 🙂
Здравствуйте. Установил слайдер, добавил автопрокрутку, как написано в комментариях но теперь интересует возможно ли изменять интервал автоматического перелистывания?
Все уже разобрался, если вместо “autoPlay : true” прописать, например, “autoPlay : 10000”, то перелистывание будет происходить каждые 10 сек. По умолчанию перелистывание происходило каждые 5 сек.
Супер! Рад за Вас, что получилось разобраться самостоятельно 🙂
Здравствуйте.
Возможно ли как-то сделать слайдер не только для изображений, но и для текста. Т.е. в одном слайде слева должна быть картинка, а справа текст (не на самой картинке). Слайд должен быть не на всю ширину экрана, а примерно наполовину. Следующий слайд не виден до нажатия на кнопку прокрутки.
Спасибо 🙂