jQuery слайдер контента слайдшоу картинок блок на главной

Вы наверняка встречали на сайтах, эффектный приём – слайдер картинок (с ссылками на контент или без него). Обычно такой блок размещают на главной странице, для привлечения внимания посетителей к новым статьям, страницам и разделам сайта.

Если Вы задумаете воспроизвести подобное слайд шоу у себя на сайте, Вы рано или поздно придёте к jQuery плагинам. Сам по себе jQuery мощная библиотека JavaScript. И её популярность во многом определяется наличием огромного числа сторонних дополнений. Плагины создаются сторонними разработчиками и удовлетворяют любые, даже самые изощренные потребности вебмастера.

В этом руководстве мы коснёмся установки и настройки скрипта jQuery (плагина) реализующего скроллинг изображений, контента, ссылок. Вы можете сразу посмотреть этот слайдер плагин в работе. Плагин называется SlidesJS и разработан программистом Нейтаном Сёрлсом.

  1. Для установки плагина на ваш сайт Вам , во-первых, понадобится подключить jQuery:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    Делать это лучше всего в заголовке HTML странице , между тегами <head> ….. </head>
  2. Во-вторых, Вам понадобится сам плагин (версию 3.0 можно скачать здесь).
  3. Закачайте файл jquery.slides.min.js в папку с js на Вашем сайте (в архиве , файл находится в папке source).
  4. Подключаем плагин слайдера сразу следом за подключенным jquery:
    <script src="http://weblomaster.ru/tests/jQuery_SlidesJS/jquery.slides.min.js"></script>
  5. Запускаем механизм плагина с помощью кода в тегах <script> ….. </script>:
    <script>
    $(function(){
    $("#slides").slidesjs({
    width: 700,
    height: 500
    });
    });
    </script>

    Это базовые параметры вызова плагина. В них, как Вы наверняка догадались, указана ширина и высота блока со слайдами.
  6. В теле HTML документа, в нужном месте между тегами <body> ….. </body>, размещаем DIV блок в котором появятся слайды:
    <div id="slides" style="width:700px;height:550px;">
    <img src="http://weblomaster.ru/wp-content/uploads/2013/12/tar-bz2-flags.png">
    <img src="http://weblomaster.ru/wp-content/uploads/2013/09/TIMESTAMP_MYSQL_Unix_time.jpg">
    <img src="http://weblomaster.ru/wp-content/uploads/2013/09/first-letter-css.jpg">
    </div>

    Размер блока DIV должен быть больше (по высоте) чем параметр высоты в настройках плагина. Например, если размер плагина 700 на 500 пикселей, то сам блок размером 700 на 550 (или даже больше). Снизу от изображений выводится навигация, переключение между картинками (1, 2, 3 и так далее).
  7. Можно (и даже нужно) сделать более тонкую настройку плагина слайдшоу. Для этого, вместо базовых параметров из пункта 5 нашего обзора, укажем следующие параметры:
    <script>
    $(function(){
    $("#slides").slidesjs({
    pagination: {
    active: true,
    // показывать (true) или нет (false) навигацию по слайдам
    effect: "fade"
    // эффект перехода к слайду при нажатии пользователям на навигацию "slide" - перелистывание или "fade" появление вспышка
    },
    play: {
    active: false,
    // показывать (true) или нет (false) кнопку остановки слайдов
    effect: "slide",
    // эффект при автоматическом показе слайдов "slide" - обычный сдвигом в бок или "fade" - появление
    interval: 5000,
    // время между появлением слайдов в миллисекундах 5000 - равно пяти секундам паузы
    auto: true,
    // запускать слайды при открытие страницы пользователям true , если false пользователь должен будет сам выбирать нужный слайд
    swap: true,
    // показывать (true) или нет (false) переключать - то кнопку стоп , то кнопку плей
    pauseOnHover: false,
    // останавливать слайды когда пользователь навел мышь на слайд (true) или нет (false)
    restartDelay: 2500
    // время в миллисекундах для перезагрузки слайдов
    },
    navigation: {
    active: false,
    // показывать (true) или нет (false) кнопки вперед - назад
    // вы можете задать свои собственные кнопки с помощью классов стилей <style>
    // предыдущая страница класс: class="slidesjs-previous slidesjs-navigation"
    // следующая страница класс: class="slidesjs-next slidesjs-navigation"
    effect: "slide"
    // эффект перехода при нажатии на кнопки вперед - назад "slide" - обычный в бок или "fade" - появление
    },
    width: 700,
    height: 500
    });
    });
    </script>

Установка завершена! Наслаждаемся результатом. Для того, чтобы вместо номеров страниц были иконки , используйте стили <style> ….. </style> , например так:
<style>
#slides {
display:none;
/* позволяет избежать появление всех картинок сразу до того как плагин полностью загрузился */
}
.slidesjs-pagination {
margin:6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(http://weblomaster.ru/tests/jQuery_SlidesJS/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px }
.slidesjs-pagination li a:hover { background-position: 0 -26px }
#slides a:link, #slides a:visited { color: #333 }
#slides a:hover, #slides a:active { color: #9e2020 }
</style>

Если просто крутить картинки для Вас недостаточно, добавьте ссылки на нужный контент (и атрибут стиля в каждую картинку style=»width:100%;»):
<div id="slides" style="width:700px;height:550px;">
<a href="http://weblomaster.ru/"><img src="http://weblomaster.ru/wp-content/uploads/2013/12/tar-bz2-flags.png" style="width:100%;" border="0" /></a>
<a href="http://weblomaster.ru/"><img src="http://weblomaster.ru/wp-content/uploads/2013/09/TIMESTAMP_MYSQL_Unix_time.jpg" style="width:100%;" border="0" /></a>
<a href="http://weblomaster.ru/"><img src="http://weblomaster.ru/wp-content/uploads/2013/09/first-letter-css.jpg" style="width:100%;" border="0" /></a>
</div>

Вспомогательные ссылки: официальный сайт плагина с описанием на английском языке.

Опубликовано 21.12.2013 в 19:52 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, jQuery · Теги: , , , , , , , ,