Создание сайтов (Россия, СНГ)

Москва: +7 (910) 009-17-49


Создание профессиональных сайтов. ПОД КЛЮЧ! Звоните!

Новости
Обзор адаптивного слайдера

Отличный слайдер OWL Carousel, который подойдет для всех устройств.

подробнее
Новый интернет магазин "The best home"

Здесь вы сможете подобрать аксессуары для дома, соответствующие вашей фантазии и внутреннему миру. При помощи наших товаров в доме будет создана необыкновенная атмосфера тепла.

подробнее
Обновлен дизайн сайта p-a-r-t-y.ru

Дизайн сайта ведущей Виктории Васильевой был обновлен.

подробнее
Интернет-магазин компании Бинкос

Новый сайт позволяет пользователям делать покупки не выходя из дома и по сниженным ценам! www.bincos.ru

подробнее
Cтудия звукозаписи & продюсерский центр

На сайте представлено множество интересных материалов и редких записей таких артистов как А. Барыкин, А. Морозов и других.
www.record-studio.ru

подробнее
Новый сайт справочника "Желтые страницы"

Новый сайт стал более понятным и удобным для пользователей, а улучшенная технология поиска организаций и компаний поможет найти необходимую информацию в кратчайшие сроки. Оцените работу нового сайта www.yp32.ru.

подробнее
Статьи

Адаптивный слайдер для сайта. OWL Carousel

Здравствуй, посетитель, этого ресурса!
Сегодня решил поделиться информацией, возможно кому-то она будет полезна.
Я недавно разрабатывал сайт с адаптивной версткой и столкнулся с вот такой проблемой:
нужен был слайдер, который при различных разрешениях экрана, показывал бы различное количество слайдов.
Возможно кто-то скажет, что решить эту проблему очень просто, достаточно начальных знаний javascript и любого стандартного слайдера, которых в интернете сотни. Но зачем делать то, что уже сделано и прекрасно работает.
После недолгих поисков наткнулся на очень интересный слайдер OWL Carousel.
Основные плюсы использования OWL Carousel:

  • Есть поддержка смены слайдов касанием пальца. Это очень удобно, если смотреть сайт на мобильном телефоне или планшете.
  • Позволяет листать слайды прихватом левой кнопки мышки.
  • Поддерживает адаптивность, т.е. под разные разрешения экрана можно настроить вывод различного количества слайдов.
  • Использует CSS3.
  • Есть возможность использования на странице сразу нескольких экземпляров слайдера. Это удобно когда есть необходимость вывода на странице сразу нескольких слайдеров.
  • OWL Carousel полностью совместим со всеми современными браузерами.
  • Исходный код слайдера очень компактный, поэтому он не будет тормозить загрузку страницы.

Чтобы начать использование слайдера достаточно подключить следующие файлы:


    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
   
    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">
   
    <!-- jQuery 1.7+ -->
    <script src="jquery-1.9.1.min.js"></script>
    
    <!-- Include js plugin -->
    <script src="assets/owl-carousel/owl.carousel.js"></script>

Далее необходимо создать контейнер для слайдера, в который внести столько слоев, сколько будет слайдов.

<div id="owl-example" class="owl-carousel">

   <div> Содержимое слайда 1 </div>

   <div> Содержимое слайда 2 </div>

   <div> Содержимое слайда 3 </div>

   <div> Содержимое слайда 4 </div>

   <div> ... </div>

</div>

И наконец иницаилизируем jquery и вызываем слайдер.

<script>

$(document).ready(function() {

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

         items : 4, //Количество слайдов при разрешении экрана более 1000px
        itemsDesktop : [1000,3], //При разрешении экрана от 901px до 1000px
        itemsDesktopSmall : [900,2], // При разрешении экрана от 601px до 900px
        itemsTablet: [600,1] //При разрешении экрана от 0 до 600px

});

</script>

Есть возможность кастомизировать слайдер с помощью множества параметров, которые можно изменять при инициализации слайдера.

Вот что получилось в итоге: