Мультимедийные сайты широко заполонили просторы интернета, люди хотят делиться впечатлениями, изображениями и видео-файлами. Зачастую на фотосайтах или порталах можно заметить ротаторы контента, которые помогают сэкономить место на ресурсе. Ротатор весьма удобный элемент для сайта, ведь в него можно запихнуть все что душа пожелает, при этом сохранить уйму места на сайте. В данном уроке мы рассмотрим как создать замечательный автоматический ротатор контента для сайта с помощью jQuery.
Идея заключается в том, что посетитель может листать слайдер не только с помощью стрелок, но и с помощью миниатюр. Также в ротаторе присутствует контейнер, в котором размещена дополнительная информация с возможностью прокрутки контента.
Шаг 1. HTML
Для начала мы рассмотрим разметку, в которой будет находиться контейнер с содержанием.
<div class="cr-container" id="cr-container">
<div class="cr-content-wrapper" id="cr-content-wrapper">
<div class="cr-content-container" id="content-1" style="display:block;">
<img src="images/1.jpg"class="cr-img"/>
<div class="cr-content">
<div class="cr-content-headline">
<h2>Оглавление</h2>
<h3>
<span>Текст</span>
<a href="#" class="cr-more-link">Читать далее ></a>
</h3>
</div>
<div class="cr-content-text">
<p>Some text here...</p>
</div>
</div>
</div>
<div class="cr-content-container" id="content-2">
...
</div>
...
</div>
<div class="cr-thumbs">
<div data-content="content-1" class="cr-selected">
<img src="images/thumbs/1.jpg"/>
<h4>Оглавление</h4>
</div>
<div data-content="content-2">
<img src="images/thumbs/2.jpg"/>
<h4>Читать</h4>
</div>
...
</div>
</div>
Шаг 2. jQuery
Мы рассмотрим некоторые параметры которые присвоены по умолчанию, их можно изменить на свое усмотрение:
$('#cr-container').crotator({
// Слайдер
autoplay : false,
// Интервал слайдера
slideshow_interval : 3000,
// Показ миниатюр сначала
openThumbs : true,
// Скорость появления миниатюр
toggleThumbsSpeed : 300
});
Вот и все. Надеюсь у вас все получится. Материал взят из зарубежного источника - http://tympanus.net/codrops/2011/07/29/content-rotator/ и представлен исключительно в ознакомительных целях.
