Bootstrap карусель (Carousel) виджет
Bootstrap карусельного (Carousel) плагин является гибким ответом на сайт добавить манеру слайдер стиле. Кроме того, содержание является достаточно гибким, может быть изображение, встроенный фрейм, видео или любой другой тип контента, который вы хотите разместить.
Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наcarousel.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.
примеров
Вот простой слайд, используя Bootstrap карусель (Carousel) плагин показывает элемент контура общих компонентов. Для достижения вращения, вам нужно только добавить код с этим тегом. Нет необходимости использовать атрибуты данных, не нужно простое развитие класса на основе может быть только.
примеров
<Div ID = "myCarousel" класс = "карусельный слайд">
<! - Carousel (Карусель) Index ->
<Ol класс = "карусельного индикаторы">
<Li данных целевых = "#myCarousel" данных слайд-к = "0 " класс = "активный"> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "1 "> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "2 "> </ li>
</ Ol>
<! - Carousel (Карусель) Проект ->
<Div класс = "карусельного внутренний">
<Div класс = "элемент активен">
<Img SRC = "/wp-content/uploads/2014/07/slide1.png" Alt = "Первый слайд">
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide2.png" Alt = "Второй слайд">
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide3.png" Alt = "Третий слайд">
</ Div>
</ Div>
<! - Carousel (Карусель) Навигация ->
<А класс = "карусельного управления влево" HREF = "#myCarousel"
данных слайд = "пред"> & lsaquo;
</ A>
<А класс = "карусельного управления вправо" HREF = "#myCarousel"
данных слайд = "Следующий"> & rsaquo;
</ A>
</ Div>
Попробуйте »
Результаты следующие:
Дополнительное название
Вы можете добавлять подписи к слайду с помощью.carousel-заголовка элемента .itemвнутри. Только вам необходимо поместить какой-либо дополнительный HTML, где она будет автоматически выравниваются и отформатирован. Следующий пример иллюстрирует этот момент:
примеров
<Div ID = "myCarousel" класс = "карусельный слайд">
<! - Carousel (Карусель) Index ->
<Ol класс = "карусельного индикаторы">
<Li данных целевых = "#myCarousel" данных слайд-к = "0 " класс = "активный"> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "1 "> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "2 "> </ li>
</ Ol>
<! - Carousel (Карусель) Проект ->
<Div класс = "карусельного внутренний">
<Div класс = "элемент активен">
<Img SRC = "/wp-content/uploads/2014/07/slide1.png" Alt = "Первый слайд">
<Div класс = "карусельного надпись"> Заголовок 1 </ DIV>
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide2.png" Alt = "Второй слайд">
<Div класс = "карусельного надпись"> Название 2 </ DIV>
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide3.png" Alt = "Третий слайд">
<Div класс = "карусельного надпись"> Заголовок 3 </ DIV>
</ Div>
</ Div>
<! - Carousel (Карусель) Навигация ->
<А класс = "карусельного управления влево" HREF = "#myCarousel"
данных слайд = "пред"> & lsaquo;
</ A>
<А класс = "карусельного управления вправо" HREF = "#myCarousel"
данных слайд = "Следующий"> & rsaquo;
</ A>
</ Div>
Попробуйте »
Результаты следующие:
использование
- Спомощью атрибута данных: свойство данных можно легко контролировать положение карусельной (Carousel).
- Атрибутданных салазки принимаетпредключевого слова илирядом,чтобы изменить положение скользят относительно текущей позиции.
- Использованиеданных салазки-передать спутника к исходному слайду к индексу колеса, данных слайд-к = "2" будет передвинуть ползунок к определенному индексу, индекс от 0 , чтобы начать подсчет.
- данных езды = атрибут "карусельного"используется для обозначения поворота при загрузке страницы , чтобы начать воспроизведение фильма.
- По JavaScript: Carousel (Carousel) может быть вызван вручную через JavaScript, следующим образом :
$ ( '. Carousel'). Carousel ()
опции
Есть несколько вариантов, через атрибуты данных или JavaScript, чтобы пройти. В следующей таблице перечислены следующие параметры:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
способ
Вот некоторые из карусели (Carousel) плагин полезных способов:
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next') |
примеров
Следующий пример демонстрирует способ:
примеров
<Div ID = "myCarousel" класс = "карусельный слайд">
<! - Carousel (Карусель) Index ->
<Ol класс = "карусельного индикаторы">
<Li данных целевых = "#myCarousel" данных слайд-к = "0 "
класс = "активный"> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "1 "> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "2 "> </ li>
</ Ol>
<! - Carousel (Карусель) Проект ->
<Div класс = "карусельного внутренний">
<Div класс = "элемент активен">
<Img SRC = "/wp-content/uploads/2014/07/slide1.png" Alt = "Первый слайд">
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide2.png" Alt = "Второй слайд">
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide3.png" Alt = "Третий слайд">
</ Div>
</ Div>
<! - Carousel (Карусель) Навигация ->
<А класс = "карусельного управления влево" HREF = "#myCarousel"
данных слайд = "пред"> & lsaquo; </ а>
<А класс = "карусельного управления вправо" HREF = "#myCarousel"
данных слайд = "Следующий"> & rsaquo; </ а>
<! - Кнопки управления ->
<Div стиль = "выравнивания текста: центр ;">
<Input типа "кнопка" = класс = "БТН запуск слайд" Значение = "Пуск">
<Input типа "кнопка" = класс = "БТН пауза-слайд" Значение = "Пауза">
<Input типа "кнопка" = класс = "БТН предыдущая горкой" Значение = "Предыдущий слайд">
<Input типа "кнопка" = класс = "БТН следующий слайд" Значение = "Следующий слайд">
<Input типа "кнопка" = класс = "БТН слайд-один" Значение = "Авто - 1">
<Input типа "кнопка" = класс = "БТН слайд-два" Значение = "Авто - 2">
<Input типа "кнопка" = класс = "БТН слайд-три" Значение = "Авто - 3">
</ Div>
</ Div>
<Script>
$ (Function () {
// Инициализировать Carousel $ ( ".start-Slide") нажмите (функция () {$ ( "#myCarousel") карусельного типа ( «цикл») ;.}) ;. // вращение Стоп . $ ( ".pause-Slide" ) нажмите (функция () {. $ ( "#myCarousel") Carousel ( 'пауза');}); // вращение петли по проекту $ ( ".prev-Slide") нажмите (функция () {$ ( "#myCarousel") карусельного типа ( 'пред') ;.}) ;. // Вращение цикла к следующему пункту $ ( ".next-Slide") нажмите (функция () {$ ( "#myCarousel") карусельного типа ( 'Next') ;.}) ;. // вращение петли к определенному кадру $ ( ".slide-One") нажмите кнопку. (Функция () {$ ( "#myCarousel") карусельного (0) ;.}) ;. $ ( ".slide-Two") нажмите (функция () {$ ( "#myCarousel") карусельного типа (1) ;.}); $ ( ".slide-три") нажмите (функция () {$ ( "#myCarousel") карусельного типа (2); ..});});
</ Script>
Попробуйте »
Результаты следующие:
событие
В следующей таблице перечислены карусель (Carousel) плагин, который будет использоваться в случае. Эти события могут быть использованы, когда функция перехвата.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
примеров
Следующий пример демонстрирует использование события:
примеров
<Div ID = "myCarousel" класс = "карусельный слайд">
<! - Carousel (Карусель) Index ->
<Ol класс = "карусельного индикаторы">
<Li данных целевых = "#myCarousel" данных слайд-к = "0 "
класс = "активный"> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "1 "> </ li>
<Li данных целевых = "#myCarousel" данных слайд-к = "2 "> </ li>
</ Ol>
<! - Carousel (Карусель) Проект ->
<Div класс = "карусельного внутренний">
<Div класс = "элемент активен">
<Img SRC = "/wp-content/uploads/2014/07/slide1.png" Alt = "Первый слайд">
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide2.png" Alt = "Второй слайд">
</ Div>
<Div класс = "пункт">
<Img SRC = "/wp-content/uploads/2014/07/slide3.png" Alt = "Третий слайд">
</ Div>
</ Div>
<! - Carousel (Карусель) Навигация ->
<А класс = "карусельного управления влево" HREF = "#myCarousel"
данных слайд = "пред"> & lsaquo; </ а>
<А класс = "карусельного управления вправо" HREF = "#myCarousel"
данных слайд = "Следующий"> & rsaquo; </ а>
</ Div>
<Script>
$ (Function () {$ ( '#myCarousel'). На ( 'slide.bs.carousel', функция () {
предупреждение ( "когда метод экземпляра слайд вызывается сразу вызвал событие.");});});
</ Script>
Попробуйте »
Результаты следующие:
