Введение
В этом руководстве вы увидите, как создать карусель с помощью Twitter Bootstrap. Это может помочь вам создать слайдер контента, галереи изображений и т. Д.
Итак, вы сохраняете элементы (например, изображения), которые хотите представить в циклическом порядке в разделении «карусель-внутренняя», а навигация по элементам создается с помощью «» . Он использует настраиваемые атрибуты данных «data-slide» для перехода к предыдущему и следующему элементам.
Вы должны включить файлы jquery.js и bootstrap-carousel.js в HTML-файл, в котором вы создаете карусель. .
Пример карусели с Twitter Bootstrap
Пейджер Twitter Bootstrap со следующим и предыдущим примерами body {margin: 50px;} Просмотреть пример вживую.
Пример пейджера со старым и новым
Пример карусели с Twitter Bootstrap
Просмотреть пример вживую.
Использование Javascript
Вы можете использовать следующий код JavaScript для создания карусели.
$ ('. carousel'). carousel ()
Ниже приводится список параметров , которые вы можете использовать
- interval: определяет время задержки (в миллисекундах) между одним перейти к другому. Значение имеет числовой тип. Значение по умолчанию - 5000.
- pause: Это указывает, что циклическое воспроизведение изображений приостанавливается при наведении курсора мыши и возобновляется, когда вы оставляете мышь. Значение имеет строковый тип. Значение по умолчанию - 'hover'.
Вы можете использовать следующие методы с каруселью
- .carousel (options): вы можете использовать необязательный объект options. Объект циклически перебирает элементы карусели.
$ ('. Carousel'). Carousel ({interval: 2000//in milliseconds})
.carousel ('cycle'): если используется, он циклически перебирает элементы карусели слева направо.
$ ('. carousel ') .carousel (' cycle ');
.carousel (' pause '): если используется, останавливает циклический переход карусели между элементами.
$ ('# myCarousel'). hover (function () {$ (this) .carousel ('pause')}
.carousel (number ): Если используется, он циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву).
$ ("# carousel_nav"). Click (function () {var item = 4; $ ('# home_carousel'). carousel (item); return false;});
.carousel ('prev'): если используется, он переводит карусель к предыдущему элементу.
.carousel ('next'): если используется, переводит карусель к следующему элементу.
Есть два события для улучшения функциональности карусели
- слайд: Когда вызывается метод экземпляра слайда, это событие запускается немедленно.
- slid: когда циклическое переключение слайдов завершено, это событие запускается.
Здесь вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах.
