Плагин Bootstrap Carousel-это гибкий и отзывчивый способ добавления ползунков на ваш сайт. Кроме того, контент достаточно гибкий, чтобы быть изображением, встроенным кадром, видео или любого другого типа контента, который вы хотите разместить.
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Carousel.js. Или, как упомянуто в главе обзора плагинов Bootstrap , вы можете обратиться к Bootstrap.js или сжатым версиям Bootstrap.min.js.
1. Пример
Ниже приведен простой слайд, который показывает общий компонент петлевого элемента, используя плагин карусели Bootstrap. Чтобы внедрить карусель, вам просто нужно добавить код с этой меткой. Нет необходимости использовать атрибуты данных, просто простая разработка на основе классов.
<! Doctype html> <html> <head> <title> экземпляр Bootstrap- простой плагин карусель </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.js. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarouseel"> <!-индикатор каруселей-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-vo = "0"> </li> <li data-target = "#myCarousel" = "1". data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <div> <img src = divdg/uploads/2014/07/slide2. <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-навигация Carousel-> <a href = "#mycarousel" data-slide = "> ‹</a> <a href ="#mycarousel "data-slide =" next "> ■ </a href ="#mycarousel "="> ■ </a> </href = "#mycarousel" = "> hra> </href ="#mycarousel " </body> </html>
Результаты следующие:
Простой плагин карусели
2. Необязательный заголовок
Вы можете добавить заголовок к слайду через элемент. Просто поместите там любые дополнительные HTML, и он будет автоматически выровнен и отформатирован. Следующий пример демонстрирует это:
<! Doctype html> <html> <head> <title> экземпляр Bootstrap - заголовок плагина Carousel </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarouseel"> <!-индикатор каруселей-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-vo = "0"> </li> <li data-target = "#myCarousel" = "1". data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-проект каруселя-> <div> <img src = "/media/uploads/2014/07/slide1.png"> <div> title 1 </div> </div> <div> <img src = "/media uploads/optloads/07. <div> Название 2 </div> </div> <div> <img src = "/media/uploads/2014/07/slide3.png"> <div> Название 3 </div> </div> </div> <!-карусель навигация-> <a href = "#mycarousel" data-slide = "Prev"> ‹</a> <a href = "#"##hre hre = "#href ="#"#href ="#" data-slide = "Next" >› </a> </div> </body> </html>
Результаты следующие:
Название плагина Carousel
3. Использование
Через атрибут данных: использование атрибутов данных легко контролировать положение карусели.
Слайда свойства принимает ключевое слово Prev или рядом с изменением позиции слайда относительно текущей позиции.
Используйте данные о необработанном скольжении к нижней части кровати карусели. Data-Slide-to = "2" переместит слайдер к определенному индексу, а индекс подсчитывает от 0.
Свойство Data-ride = "carousel" используется для отметки карусели, которая начинает воспроизведение анимации при загрузке страницы.
Через JavaScript: карусель можно назвать вручную через JavaScript, как показано ниже:
$ ('. Carousel'). Carousel ()
4. Варианты
Есть некоторые варианты, передаваемые через свойства данных или JavaScript. В следующей таблице перечислены эти параметры:
V. Метод
Вот несколько полезных методов в плагинах карусели:
VI Пример
Следующий пример демонстрирует использование метода:
<! Doctype html> <html> <head> <title> экземпляр Bootstrap - метод плагина Carousel </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.js. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarouseel"> <!-индикатор каруселей-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-vo = "0"> </li> <li data-target = "#myCarousel" = "1". data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <div> <img src = divdg/uploads/2014/07/slide2. <img src="/media/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div> </div> <script> $ (function () {// инициализировать карусель $ (". Start-slide"). Click (function () {$ ("#mycarouseel"). Карусель ('Cycle');}); // Stop Carousel $ (". Pause-Slide"). Click (function () {$ (#myCarousel "). }); $ (". Next-Slide"). Click (function () {$ ("#MyCarouseL"). Карусель ('Next');}); $ (#mycarouse »). Карусель (1); }); </script> </body> </html>Результаты следующие:
Метод плагина Carousel
7. События
В следующей таблице перечислены события, которые будут использоваться в плагине Carousel. Эти события могут использоваться в качестве крючков в функциях.
Пример
Следующий пример демонстрирует использование событий:
<! Doctype html> <html> <head> <tite> exantce-exance-incession- Carousel Plug-In Event </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.js. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarouseel"> <!-Карусель метрика-> <ol> <li data-target = "#mycarouseel" data-slide-to = "0"> </li> <li-target = "#mycarousel" data-v-yde vo = "> </li> <li data-target ="#mycarousel "=" 1 ". data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <div> <img src = divdg/uploads/2014/07/slide2. <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-навигация Carousel-> <a href = "#mycarousele" data-slide = "> ‹</a> <a href ="#mycarousel "data-slide ="> ‹a> </href = "#mycarousel" = "> hrip> </href ="#mycarousel "="> ‹a> </href = "#mycarousel" = " $ (function () {$ ('#mycarousel'). On ('slide.bs.carousel', function () {alert ("мигает событие немедленно, когда вызывается метод экземпляра Slide.");});}); }); </script> </body> </html>Результаты следующие:
События плагина карусели
Согласно вышеуказанному уроку, я сделал свой собственный пример:
Плагин Carousel играет несколько больших изображений того же размера в порядке.
// Базовый пример. <div id="myCarousel"> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div> <div> <img src = "img/slide1.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide3.png"> </div> <div> <img src = "img/slide3.png" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> упорядочил </a> </div>
Объяснение атрибутов данных:
1. Data-Slide принимает ключевое слово Prev или рядом с изменением позиции слайда относительно текущей позиции;
2. Data-Slide-to создает оригинальный скользящий индекс до дна карусели. Data-Slide-to = "2" переместит слайдер к определенному индексу, а индекс подсчитывает от 0.
3. data-ride = "carousel" Атрибут пользовательский теж Карусель начинает воспроизведение анимации при загрузке страницы.
Если вы называете его в JavaScript, используйте метод пары ключевых значений напрямую и удалите Data-;
// Установить пользовательские свойства
$ ('#MyCarouseL'). Carousel ({// Установить автоматическое воспроизведение/2 секунды интервал: 2000, // Установить паузу события: 'hover', // воспроизводить только один раз обертывание: false,});Плагин Carousel также предоставляет некоторые методы следующим образом:
// Нажмите кнопку, чтобы выполнить $ ('кнопка'). On ('click', function () {// после нажатия, $ ('#mycarousele'). Carousel ('yack'); // Другое аналогичное});событие
$ ('#mycarousel'). On ('slide.bs.carousele', function () {alert ('бесплатно немедленно, когда режим экземпляра Slide называется');}); $ ('#mycarousel'). On ('slid.bs.carousel', function () {alert ('бесплатно, когда карусель завершает слайд');});Для получения дополнительного контента, пожалуйста, обратитесь к руководству по обучению начальной загрузке
Выше всего об этой статье. Я надеюсь, что для всех будет полезно изучить плагин Bootstrap Carousel.