В этой статье в основном изучается плагин JavaScript - карусель. Без лишних слов просто иди учиться. Полное руководство можно просмотреть: учебник Bootstrap 3.0
Карусель
Ниже приведен корпус карусели, созданный этим плагином и связанными компонентами.
<body> <div id = "carousel-example-generic" data-ride = "carousel"> <!-Индикаторы-> <ol> <li data-target = "#carousel-example-generic" slead-to = "0"> </li> <li data-target = "#carousel-example-generic"-slide-to = "1" data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-обертка для слайдов-> <div style = "text-align: center"> <viv> <img>/img> </div> <div> <img>/img> </div> <iv> <img>/img> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <img>/img> </div> <img>/img> <div> href = "#carousel-example-generic" data-slide = "prev"> <pan> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <pan> </span> </a> </div> <script src = "js/jquery-2.3. src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> // $ ('. Carousel'). Carousel ('Next'); </script> </body>Internet Explorer 8 & 9 не поддерживает анимационные эффекты перехода
Bootstrap реализует эффекты анимации на основе CSS3, но Internet Explorer 8 & 9 не поддерживает эти необходимые свойства CSS. Поэтому эффекты перехода анимации будут потеряны при использовании оба браузера. Более того, Bootstrap не собирается использовать альтернативные функции на основе JQUERY.
Дополнительные варианты
В любой. Вы также можете добавить любой HTML -код, который будет автоматически организован и отформатирован.
<div> <img>/img> <div> <h4> Первая миниатюра Donec Id Elit non mi porta gravida в Eget Metus. Nullam id dolor id nibh ultricies ethicula ut id elit. </P> </div> </div>
Добавьте три элемента, а затем эффект будет оценен.
Проблемы доступности
Компонент карусели не совместим со стандартами доступности. Если требуется совместимость, рассмотрите другие варианты представления слайдов.
Использование через атрибут данных
Атрибут данных может легко контролировать позиционирование карусели. Слайд данных может принимать прежние или следующие ключевые слова, которые управляют позицией воспроизведения. Кроме того, Slide Intest, начиная с 0, также может быть передан через Data-Slide-To.
Атрибут Data-ride = "carousel" используется для обозначения компонента каруселей, который начинается после загрузки страницы.
Добавить его во внешний контейнер карусели
<div id = "Carousel-example-generic" Data-ride = "carousel">
через JavaScript
Вручную запустите компонент карусели (выше мы автоматически включаем компонент карусели, используя свойство данных.):
$ ('. Carousel'). Carousel ()
Параметры
Варианты могут быть переданы через свойства данных или JavaScript. Для атрибутов данных вам необходимо разместить имя опции после данных, например, data-interval = "".
метод
$ (""). Карусель (варианты)
Инициализируйте компонент карусели, примите параметр опции типа объекта и запустите петлю слайда.
$ ('. Carousel'). Carousel ({интервал: 2000}).carousele ('цикл') петляции каждого кадра слева направо.
.carouseel ('пауза) останавливает карусель.
.carouseel (номер) позиционирует карусель к указанному кадру (подписка на кадре начинается с 0, аналогично массиву).
.carouseel ('prev') возвращается в предыдущий кадр.
.carouseel ('next') Перейдите к следующему кадру.
событие
Компонент карусели Bootstrap обнажает два события для прослушивания.
$ ('#carousel-example-generic'). On ('slide.bs.carousel', function () {alert (1);})Это связывает события с компонентом каруселей, а затем выполняет их в соответствующем времени выполнения. Это было много объяснено в предыдущих плагинах JavaScript, и все формы являются общими, поэтому вы можете просто использовать их.
картина
Это еще несколько практических плагинов каруселей, которые имеют очень хорошие результаты. Если они используются разумно, они всегда будут добавлять баллы на вашу страницу. Я надеюсь, что это будет полезно для каждого обучения.
Если вы не удовлетворены, вы можете проверить эти статьи на наличие углубленного исследования: редактор «Bootstrap Learning Rutorial» продвигает с вами прогресс!
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучать и прикрепить к вам две захватывающие темы:
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.