jQuery слайдер контента слайдшоу картинок блок на главной
Вы наверняка встречали на сайтах, эффектный приём – слайдер картинок (с ссылками на контент или без него). Обычно такой блок размещают на главной странице, для привлечения внимания посетителей к новым статьям, страницам и разделам сайта.
Если Вы задумаете воспроизвести подобное слайд шоу у себя на сайте, Вы рано или поздно придёте к jQuery плагинам. Сам по себе jQuery мощная библиотека JavaScript. И её популярность во многом определяется наличием огромного числа сторонних дополнений. Плагины создаются сторонними разработчиками и удовлетворяют любые, даже самые изощренные потребности вебмастера.
В этом руководстве мы коснёмся установки и настройки скрипта jQuery (плагина) реализующего скроллинг изображений, контента, ссылок. Вы можете сразу посмотреть этот слайдер плагин в работе. Плагин называется SlidesJS и разработан программистом Нейтаном Сёрлсом.
- Для установки плагина на ваш сайт Вам , во-первых, понадобится подключить jQuery:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Делать это лучше всего в заголовке HTML странице , между тегами <head> ….. </head> - Во-вторых, Вам понадобится сам плагин
- Закачайте файл jquery.slides.min.js в папку с js на Вашем сайте (в архиве , файл находится в папке source).
- Подключаем плагин слайдера сразу следом за подключенным jquery:
<script src="https://weblomaster.ru/tests/jQuery_SlidesJS/jquery.slides.min.js"></script> - Запускаем механизм плагина с помощью кода в тегах <script> ….. </script>:
<script>
$(function(){
$("#slides").slidesjs({
width: 700,
height: 500
});
});
</script>
Это базовые параметры вызова плагина. В них, как Вы наверняка догадались, указана ширина и высота блока со слайдами. - В теле HTML документа, в нужном месте между тегами <body> ….. </body>, размещаем DIV блок в котором появятся слайды:
<div id="slides" style="width:700px;height:550px;">
<img src="https://weblomaster.ru/wp-content/uploads/2013/12/tar-bz2-flags.png">
<img src="https://weblomaster.ru/wp-content/uploads/2013/09/TIMESTAMP_MYSQL_Unix_time.jpg">
<img src="https://weblomaster.ru/wp-content/uploads/2013/09/first-letter-css.jpg">
</div>
Размер блока DIV должен быть больше (по высоте) чем параметр высоты в настройках плагина. Например, если размер плагина 700 на 500 пикселей, то сам блок размером 700 на 550 (или даже больше). Снизу от изображений выводится навигация, переключение между картинками (1, 2, 3 и так далее). - Можно (и даже нужно) сделать более тонкую настройку плагина слайдшоу. Для этого, вместо базовых параметров из пункта 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(https://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="https://weblomaster.ru/"><img src="https://weblomaster.ru/wp-content/uploads/2013/12/tar-bz2-flags.png" style="width:100%;" border="0" /></a>
<a href="https://weblomaster.ru/"><img src="https://weblomaster.ru/wp-content/uploads/2013/09/TIMESTAMP_MYSQL_Unix_time.jpg" style="width:100%;" border="0" /></a>
<a href="https://weblomaster.ru/"><img src="https://weblomaster.ru/wp-content/uploads/2013/09/first-letter-css.jpg" style="width:100%;" border="0" /></a>
</div>
Вспомогательные ссылки: официальный сайт плагина с описанием на английском языке.
Рубрики: HTML, jQuery · Теги: html, jquery, js, script, style, плагин, скрипт, скроллинг, слайд
