Адаптивный слайдер Owl Carousel
Owl Carousel — это простой в использовании, обновляемый, быстрый и бесплатный адаптивный слайдер-карусель с редактируемой структурой кода. Он работает с библиотекой jquery и совместим со многими распространенными браузерами.
Их также можно использовать с помощью стрелок направления, перетаскивания и автоматического зацикливания.
Браузеры и устройства, совместимые с Owl Carousel
- Google Chrome
- Mozilla Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
Инсталляция Owl Carousel
Коды Owl Carousel CSS и Javascript должны быть добавлены на веб-страницу HTML вместе с кодами Jquery.
CSS-коды
Добавьте следующие коды CSS в теги <head></head>.
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">Вы можете разместить CSS-коды там же, где и созданный проект, или вызвать их через https://owlcarousel2.github.io/OwlCarousel2/ добавив следующие коды.
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">Примечание: Поскольку вызов кодов CSS извне создаст недостаток с точки зрения производительности, было бы более правильно вызывать их из той же области хранения, что и проект.
Javascript-коды
Добавьте коды Javascript, которые заставят Owl Carousel работать, в поле после закрытия тегов <body></body>.
Примечание: Эти коды также работают при добавлении в любую область страницы, но добавление кодов <script></script> внизу страницы будет более выгодным с точки зрения скорости сайта.
<script src="jquery.min.js"></script>
<script src="owl.carousel.js"></script>Вы также можете вызывать коды Javascript извне, как коды CSS. Или вы можете сохранить его в том же файле, что и разработанный проект. Вы можете вызвать необходимые коды Javascript для слайдера Owl Carousel через https://owlcarousel2.github.io/OwlCarousel2/ со следующим использованием.
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>Добавьте следующую библиотеку Javascript, чтобы внести коррективы, например количество отображаемых элементов в соответствии с настройками цикла Owl Carousel, клавишами со стрелками и размерами экрана.
Примечание: Эти коды должны находиться под кодами jquery.min.js и owl.carousel.js, иначе Owl Carousel не будет работать.
HTML-коды
Вы можете использовать самую простую версию Owl Carousel (без клавиш со стрелками и ползунков) с кодами ниже.
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Slide 1</h2>
</div>
<div class="item">
<h2>Slide 2</h2>
</div>
<div class="item">
<h2>Slide 3</h2>
</div>
<div class="item">
<h2>Slide 4</h2>
</div>
<div class="item">
<h2>Slide 5</h2>
</div>
<div class="item">
<h2>Slide 6</h2>
</div>
<div class="item">
<h2>Slide 7</h2>
</div>
</div>Источник:
https://owlcarousel2.github.io/OwlCarousel2/