Owl Carousel & Javascript Responsive Carousel
12.08.2021
Owl Carousel — это простой в использовании, обновляемый, быстрый и бесплатный адаптивный слайдер-карусель с редактируемой структурой кода. Он работает с библиотекой jquery и совместим со многими распространенными браузерами.
Их также можно использовать с помощью стрелок направления, перетаскивания и автоматического зацикливания.
Браузеры и устройства, совместимые с Owl Carousel
- Google Chrome
- Мозилла Фаерфокс
- Опера
- IE7/8/10/11
- Сафари для iPad
- iPod4 Сафари
- Nexus 7 Chrome
- Галактика С4
- Нокиа 8s Windows8
Установка Owl Carousel
Owl Carousel Коды CSS и Javascript должны быть добавлены на веб-страницу HTML вместе с кодами Jquery.
Коды CSS
Добавьте следующие коды CSS в теги
.min.css">
Вы можете разместить CSS-коды там же, где и разработанный проект, или вызвать их через https://owlcarousel2.github.io/OwlCarousel2/, добавив следующие коды.
Примечание: С момента вызова кодов CSS извне создадут недостаток с точки зрения производительности, правильнее было бы вызывать их из той же области хранения, что и проект.
Добавьте коды Javascript, которые заставляют карусель работать, в поле после закрытия тегов
. Примечание: Эти коды также работают при добавлении в любую область страницы, но добавление кодов внизу страницы будет более выгодным с точки зрения скорости сайта.
<скрипт src="jquery.min.js">
Вы также можете вызывать коды Javascript извне, как коды CSS. Или вы можете сохранить его в том же файле, что и разработанный проект. Вы можете вызвать необходимые коды Javascript для слайдера Owl Carousel через https://owlcarousel2.github.io/OwlCarousel2/ со следующим использованием.
Добавьте следующую библиотеку Javascript, чтобы внести коррективы, например количество отображаемых элементов в соответствии с настройками цикла Owl Carousel, клавишами со стрелками и размерами экрана.
Примечание: Эти коды должны находиться под кодами jquery.min.js и owl.carousel.js, иначе Owl Carousel не будет работать.
HTML-коды
Вы можете использовать самую простую версию Owl Carousel (без клавиш со стрелками и ползунков) с кодами ниже.
<дел>
<дел>
Слайд 1
carousel/dist/assets/owl.carousel.css';
импортировать 'owl.carousel/dist/assets/owl.theme.default.css';
// ....
// className "owl-theme" не является обязательным
Строка «страница» может быть настроена на пролистывание страницы.
Это хороший вариант, поэтому я поработаю над ним в ближайшем выпуске.
