Автор

Ротатор контента для сайта с помощью jQuery

Ротатор контента для сайта с помощью jQuery


 

Мультимедийные сайты широко заполонили просторы интернета, люди хотят делиться впечатлениями, изображениями и видео-файлами. Зачастую на фотосайтах или порталах можно заметить ротаторы контента, которые помогают сэкономить место на ресурсе. Ротатор весьма удобный элемент для сайта, ведь в него можно запихнуть все что душа пожелает, при этом сохранить уйму места на сайте. В данном уроке мы рассмотрим как создать замечательный автоматический ротатор контента для сайта с помощью 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
});

 

Вот и все. Надеюсь у вас все получится. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Ротатор контента для сайта с помощью jQuery

Сегодня один посетитель данного сайта выразил свое недовольство что я обманываю своих клиентов!!! Написал отзыв, но при этом не оставил своих координат для ответа!!! Можно было бы оставить без внимания этот отзыв, но я решил написать ответ, так как очень часто подобные умники пишут толком не разобравшись!


Ротатор контента для сайта с помощью jQuery

Современный дизайн сайтов стал весьма прагматичным, появились новые возможности для реализации задумок на сайте. В последнее время стал весьма популярный среди разработчиков эффект параллакса, это не удивительно, мы сами уделяем ему много уроков и статьей по созданию эффектов на нем, ведь эта тенденция современного дизайна. Заказчики так и просят создавать сайты с применением такого эффекта, но что делать если у Вас уже готовый дизайн, но вы хотели добавить какой-нибудь эффект параллакса к себе на сайт.


Ротатор контента для сайта с помощью jQuery

Предлагаю вам, на мой взгляд, стильные и креативные SVG иконки с длинными тенями (46 шт.). Это коллекция иконок, распространяемых под лицензионным соглашением Creative Commons Attribution, а это значит, что вы можете использовать их бесплатно как в личных, так и в коммерческих проектах.


Ротатор контента для сайта с помощью jQuery

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


75 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close