jCarousel Lite - это jQuery-плагин, который превращает в карусель требуемые картинки и HTML-контент. Он суперлегкий, весит около 2 кб, но очень гибкий и настраиваемый для всех наших нужд.
Установка jCarouselLite
Установка на сайт карусели jCarouselLite, как правило, состоит из 3 шагов, которые мы подробно разберем ниже...
Стили для jCarouselLite: дефолтные и пользовательские.
Базовая установка потребует от нас разместить на странице HTML-код и вызвать плагин jCarouselLite. Вот и все !!! Плагин позаботится о расположении элементов чтобы получилась красивая горизонтальная или вертикальная карусель. Размеры карусели определяются на основе видимых элементов (но вы должны предоставить размеры отдельных элементов). Кроме того, плагин позаботится о совместимости между различными браузерами. HTML, CSS и JS-код для такой базовой установки показаны ниже.
<!-- HTML -->
<button class="prev-no-style">«</button>
<button class="next-no-style">»</button>
<div class="carousel-no-style">
<ul>
<li><img src="image/1.jpg" style="width:130px; height:118px;" alt></li>
<li><img src="image/2.jpg" style="width:130px; height:118px;"> alt</li>
<li><img src="image/3.jpg" style="width:130px; height:118px;"> alt</li>
<li><img src="image/4.jpg" style="width:130px; height:118px;"> alt</li>
<li><img src="image/5.jpg" style="width:130px; height:118px;"> alt</li>
</ul>
</div>
/* JS */
$(".carousel-no-style").jCarouselLite({
btnNext: ".next-no-style",
btnPrev: ".prev-no-style"
});
Результат этих настроек показан на изображениях снизу. Выглядит не великолепно, но работает. Причем работает хорошо. . Попробуйте нажать на навигационные кнопки » и «.
Единственная необходимая информация о стилях, которую нужно предоставить - ширина и высота элемента карусели, в этом случае <img src="image/1.jpg" style="width:130px; height:118px;">. Эта информация крайне важна при инициализации карусели, так что не забудьте ее.
Но что делать, если вы хотите оформить карусель по-другому? Вы можете добавить закругленные углы, расстояние между элементами и, если хотите, поменять цвета фона. Плагин совершенно не ограничивает вас в этом. Ниже приведен пример одной из такой стилизованной карусели.
/* CSS */
.carousel {
border: 1px solid #bababa;
border-radius: 10px;
background-color: ghostwhite;
float: left;
padding-left: 10px;
}
.carousel>ul>li>img {
width: 150px;
height: 118px;
vertical-align: middle;
margin: 10px 10px 10px 0;
border-radius: 5px;
}
a.prev,
a.next {
display: block;
width: 26px;
height: 30px;
line-height: 1;
background-color: #333333;
color: ghostwhite;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 25px;
border-radius: 8px;
float: left;
}
a.prev {
margin: 50px -5px 0 0;
text-indent: 7px;
}
a.next {
margin: 50px 0 0 -5px;
text-indent: 10px;
}
a.prev:hover,
a.next:hover {
background-color: #666666;
}
<!-- HTML -->
<div class="custom-container basic2">
<a href="#" class="prev">‹</a>
<div class="carousel">
<ul>
<li><img src="image/1.jpg" alt></li>
<li><img src="image/2.jpg" alt></li>
<li><img src="image/3.jpg" alt></li>
<li><img src="image/4.jpg" alt></li>
<li><img src="image/5.jpg" alt></li>
</ul>
</div>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
/* JS */
$(".basic2 .carousel").jCarouselLite({
btnNext: ".basic2 .next",
btnPrev: ".basic2 .prev"
});
Как видите, большая часть CSS кода описывает кнопки следующий и предыдущий. Также заданы значения полей, отступов цвет подложеки карусели и радиус скругления чтобы показать, что нет ничего невозможного.
Теперь, когда вы понимаете разницу между стилем по умолчанию и пользовательским стилем, вы можете легко разобраться примерах. Так как все примеры используют одинаковый HTML и CSS код, я буду показывать для них только JS-код. Вы всегда можете посмотреть исходный код, если захотите. :-)
Документация jCarouselLite
Основная часть карусели jCarouselLite может быть создана только с помощью нижеприведенного фрагмента кода. Этот код, как правило, выполняется при событии document.ready или window.load, но вы можете инициализировать карусель когда вам необходимо. В следующем примере карусель создается при событии document.ready.
$(function() {
$(".any-class").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
Все возможные настройки рассмотрены ниже:
Примеры jCarouselLite