Плагин для создания адаптивной карусели

demosourse

Сегодня мы покажем вам плагин OWL Carousel, c помощью которого можно создать адаптивную карусель, работающую, в том числе, на сенсорных устройствах.

Как использовать

1. Подключаем стили, jQuery и плагин:

<!-- Основные стили -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Тема по умолчанию -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- Подключаем jQuery  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Подключаем плагин -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

2. Настраиваем HTML

Специального кода не надо. Всё что вам нужно, так это заключить контент карусели в <div class="owl-carousel">. Стили для класса “owl-carousel” описаны в файле owl.carousel.css:

<div id="owl-example" class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 ...
</div>

3. Вызываем плагин

$(document).ready(function() {

 $("#owl-example").owlCarousel();

});

Использование API

// Инициализация плагина
$(".owl-carousel").owlCarousel()

// получаем объект карусели и записываем в переменную
var owl = $(".owl-carousel").data('owlCarousel');

// публичные методы
owl.next()   // переходим на следующий слайд
owl.prev()   // переходим на предыдущий слайд
owl.goTo(x)  // переходим на слайд x

owl.update() // обновляем слайд

owl.buildControlls()    // отображаем элементы управления
owl.destroyControlls()  // удаляем элементы управления

owl.play() // авто-прокрутка
owl.stop() // остановка авто-прокрутки

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://owlgraphic.com/owlcarousel/index.html
Перевел: Станислав Протасевич
Урок создан: 31 Июля 2013
Просмотров: 87873
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 31 Июля 2013 21:52
    airarm
    Интересно ))
  • 1 Августа 2013 01:58
    vibiy
    Полезная вещь, спасибо!
  • 1 Августа 2013 10:34
    likrion
    Красота.. зделаю из него модуль для joomla
  • 1 Августа 2013 12:49
    temcity
    Отличная вещь:) Большое Спасибо!!
  • 1 Августа 2013 14:06
    mr_andrson
    В закладки, однозначно.
  • 1 Августа 2013 15:09
    soprun.vladislav
    Круто!
  • 1 Августа 2013 19:54
    DownHouse
    предпочитаю также респонзивный carouFredSel
  • 1 Августа 2013 23:25
    Ygreec
    Суперская вещица!
  • 2 Августа 2013 11:13
    superdenceo
    Уважаемый подскажи как в третий слайдер где 1 изображение сделать автопрокрутку? Спасибо за ранее
    • 2 Августа 2013 16:45
      Quickssand
      autoPlay:true; Добавить там где у вас
       $(document).ready(function() { $("#owl-demo").owlCarousel({ navigation : true, // Show next and prev buttons slideSpeed : 300, paginationSpeed : 400, items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet: false, itemsMobile : false }); });
    • 2 Августа 2013 17:27
      sergogogo
      autoPlay: 3000, //Set AutoPlay to 3 seconds
      наверное это добавить, не?))) посмотрите как в первом примере, логику надо иногда включать
      • 2 Августа 2013 17:45
        Quickssand
        согласен ошибся.
  • 4 Августа 2013 16:58
    blackhellorigin
    Подскажите как убрать точки в контрол панели? (ps: под слайдером, не могу понять какой функцией отключается)
  • 28 Августа 2013 14:16
    klogachev
    Подскажите, как вместо точек сделать пункты меню, чтобы они соответствовали нужному слайду и при листании слайда тоже переключаться.
  • 21 Октября 2013 20:41
    sowa
    подскажите как вместо prev и next вставить картинки? и как сделать что бы дальше не прокручивались слайды а то у меня допустим 2 слайда а в конце появляется 3 блок пустой...
  • 18 Декабря 2013 16:31
    jora3decb
    Что значит - 3. Вызываем плагин? Можете подронобно описать как добавить этот слайдер на сайт?
  • 18 Декабря 2013 17:15
    jora3decb
    Использование API что значит? =)
  • 7 Февраля 2014 13:19
    bober2k
    Помогите разобраться, засунул эту карусель в спойлер, и в итоге изображения не принимают нужный вид, но стоит включить firebug, как все прогружается нормально. Без спойлера проблем нету.
    <style>
    .spoiler_body{	display:none;	background-color:#FFF;	position:relative;	z-index:99;	height:auto;	width:100%;	padding: 5px;
    </style>
    <div class="spoiler_body"> <div id="owl-demo"> <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div> </div> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3] }); }) </script>
    </div> <input id="btn_rnd" type="submit" onclick="$('.spoiler_body').slideToggle('normal')" class="shower" value="" />
    
    Спасибо за помощь.
  • 12 Февраля 2014 00:29
    orb effect
    Очень интересно! Как отключить tuch?
  • 1 Марта 2014 11:32
    zmeyx
    Отличный плагин. А как использовать несколько их на странице?
  • 18 Июня 2014 02:05
    fanl2
    Интересный плагин! Но как же все таки несколько их на странице?
  • 20 Апреля 2016 23:23
    moshatin
    Подскажите, пожалуйста, можно ли с помощью Owl carousel реализовать слайдер, в котором можно было бы показывать элементы в два ряда? Например, чтобы в одном слайде отображалось 8 картинок по 4 в каждом горизонтальном ряду? Среди демок подобного варианта не нашел. Если кто знает другой подходящий скрипт для подобной задачи, пожалуйста, подскажите.
^ Наверх ^