Предыдущий ролик Следующий ролик  

Видео урок: Изменение интервала ротации для карусели

Bootstrap 3: добавь интерактивность на свой сайт

Итак, до сих пор мы рассмотрели довольно много аспектов, касающихся создания карусели, кроме работы с JavaScript. Если вы зайдете на сайт getbootstrap.com, где находится документация, и найдете там раздел для карусели, то увидите все примеры HTML, которые мы рассмотрели до сих пор, - надписи и тому подобное. Но если вы прокрутите еще немного вниз, то найдете некоторые опции JavaScript, которые доступны для работы с каруселью.

Одна из наиболее важных опций - это изменение интервала ротации. Возможно, вы захотите ускорить или замедлить карусель, в зависимости от того, сколько у вас информации на каждом слайде. Есть еще одна опция под названием "wrap", которая позволяет указать, сколько раз карусель должна вращаться. Должна ли она работать непрерывно или совершить один цикл, а затем остановиться. Таким образом, в этом видео я покажу вам, как кодировать эти вещи. Перейдите в Subline Text к файлу index.html и прокрутите документ вниз до самого конца. Нам нужна строка 131. Это ссылка на файл bootstrap.min.js. Давайте добавим немного кода JavaScript сразу после нее. Итак, мы запишем тег script. Внутри этого тега мы можем добавить код JavaScript для карусели. Итак, что же мы хотим сделать? Здесь мы будем использовать синтаксис, похожий на jQuery. Точно так же, как с jQuery, мы начнем со знака доллара, и затем в скобках добавим селектор,

который будет ссылаться на нужный нам блок кода. И если вы посмотрите на код выше, вы заметите, что основные блоки, в которых содержится карусель, отмечены классами carousel или locations, и мы можем работать с любым из них. Они оба будут указывать на карусель. Итак, я выберу класс carousel, а затем вызову здесь функцию carousel. У меня есть очень простой способ, как не запутаться во всем этом коде. Этот код jQuery просто инициализирует карусель. Но если затем вы добавите сюда фигурные скобки и абзац, будет менее вероятно, что вы потеряете какие-нибудь дополнительные скобки, фигурные скобки или точку с запятой. Так гораздо легче их отслеживать. Я предпочитаю записывать их все в одну строку, а затем добавлять абзацы. Итак, между этими фигурными скобками мы добавим свойство interval и установим для него другое значение.

По умолчанию его значение - 5000. 5000 миллисекунд или пять секунд. Если мы запишем сюда, например, 500, это будет полсекунды на слайд. Итак, давайте просто посмотрим, как это будет выглядеть. Сохраните эту страницу, а затем вернитесь в Chrome и обновите ее. Слайды должны меняться очень быстро. Как это выглядит? Наверное, немного быстрее, чем хотелось бы, так что мы лучше установим для интервала более разумное значение. Скажем, 2000 - это будет две секунды на слайд.

Таким образом, давайте снова изменим интервал. Наверное, он лучше нам подходит. Еще одна маленькая хитрость, которую я хочу вам показать, - это свойство wrap. На данный момент, когда карусель дойдет до последнего слайда, она вернется к первому и продолжит вращаться. Но вполне возможно, что карусель вам нужна, чтобы рассказать какую-либо историю. Может быть, вам нужно, чтобы карусель прошла один цикл и остановилась на последнем слайде. В Bootstrap для этого используется свойство wrap.

Таким образом, мы можем добавить здесь еще одну декларацию. Поставьте запятую после первого свойства, и затем добавьте свойство wrap со значением false. По умолчанию оно содержит true, что означает, что карусель будет вращаться непрерывно. Значение false указывает, что карусель пройдет только один цикл. Итак, вернитесь в браузер и обновите страницу. Вообще-то, чтобы она вращалась немного быстрее, я опять установлю интервал в 500 миллисекунд. Так все слайды пройдут очень быстро, и мы обновим страницу.

Как видите, карусель просто пролетает перед глазами и на последнем слайде полностью останавливается. Таким образом, на странице останется этот последний слайд. Итак, эти дополнительные опции вы можете использовать, когда, например, у вас есть несколько слайдов, и на последнем находится ваше главное сообщение пользователю. Когда карусель остановится, оно будет и дальше отображаться на странице.