На просторах интернета нашел один очень симпатичный слайдер изображений COIN SLIDER, работающий на jQuery. Его можно скачать как на официальном сайте так и на xdan'е. Всякое бывает, проект забросят или сайт пропадет, именно поэтому выкладываю public скрипты у себя на сайте, но все же настоятельно советую качать такие вещи с оффсайтов. Слайдер вырос из другого подобного плагина того же автора jqFancyTransitions
И так, что он умеет.
Плагин совместим с Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+, т.е. можно уверенно сказать, что он запуститься почти на всех браузерах. Также у него есть ряд несомненных плюсов:
Он бесплатен и используется по MIT лицензии
Совместим с Android и iPhone (iOS) платформами
Имеет уникальный эффект перехода между слайдами
Валидная разметка слайдера
Гибко настраеваемая конфигурация
Автоматическая прокрутка слайда
Кнопки навигации (Назад, Вперед и перейти к нужному слайду)
Легковесный (всего 8kb)
Полностью настраиваемый с помощью CSS
Посмотрите на Демо
Как использовать
Загружаем jQuery, Coin Slider javascript и CSS файлы и подключаем их к Вашей странице:
<script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="coin-slider.min.js"></script> <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
Далее добавляем в страницу нужные изображения. В таком формате
<div id='coin-slider'> <a href="img01_url" target="_blank"> <img src='img01.jpg' > <span> Описание изображения №1 </span> </a> ...... ...... <a href="imgN_url"> <img src='imgN.jpg' > <span> Описание изображения №n </span> </a> </div>
Последнее, что осталось сделать - это инициализировать плагин на нужный контейнер, в данном случае это #coin-slider
<script type="text/javascript">
jQuery(function() {
$('#coin-slider').coinslider();
});
</script>
Настройки
При инициализации плагина доступны ряд настроек:
width: 565, // ширина слайдера height: 290, // высота слайдера spw: 7, // количество разбиений по ширине sph: 5, // количество разбиений по высоте delay: 3000, // задержка между сменой слайдов sDelay: 30, // задержка анимации затухания opacity: 0.7, // прозрачность описания и кнопок навигации titleSpeed: 500, // скорость появления описания effect: '', // эффекты random, swirl, rain, straight navigation: true, // наличие на слайдере кнопок вперед и назад links : true, // делать изображения как ссылки hoverPause: true// останавливать автоматическое слайдшоу при наведении на слайд
к примеру если фото для слайдера будут в ширину 500px то и ширину слайдера надо сделать такой же.
jQuery("#coin-slider").coinslider({
width: 500,
height: 300,
spw: 5,
sph: 4
});
Кроме того, хотя плагин и кроссбраузерный, однако скорость его работы в некоторых браузерах оставляет желать лучшего. Связано это с его эффектом разбиения изображений. Чудес не бывает, canvas'ом тут и не пахнет. Плагин создает кучу блоков, каждому из которых ставит определенную часть изображения в качестве фона. Т.е. если по умолчанию у нас разбиение 7*5=35, то плагин создаст 35 копий данного изображения. Поэтому имеет смысл для особо медленных браузеров понижать параметры разбиения
if (jQuery.browser.msie == true)
jQuery("#coin-slider").coinslider({
spw: 3,
sph: 3
})
else
jQuery("#coin-slider").coinslider({
spw: 8,
sph: 8
});
Бывает, что автоматическое слайд шоу не всегда необходимо. Параметра полного отключения в слайдере я так и не нашел, но выход все же есть: просто ставим параметр delay где-нибудь около 10000000.
jQuery("#coin-slider").coinslider({
delay:1000000000
});
Для усиления WOW эффекта у слайдера есть выбор между 3 перходами: swirl - завихрение, rain - дождь (картинка меняется мозаикой), straight - лесенка. Плюс можно указать в качестве параметра random, тогда на каждый слайд будет выбрана случайная анимация перехода. По умолчанию включен именно random.
Оформление
Плагин очень гибкий по части оформления, все стили навигации вынесены в отдельный файл coin-slider-styles.css
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
/*оформление самого слайдера*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
/*оформление кнопок навигации*/
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
/*оформление блока коментариев*/
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
/*оформление кнопок вперед назад*/
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
к примеру, сделать круглые кнопки навигации, как в примере сверху можно просто переопределив стили для .cs-buttons и .cs-buttons a
.cs-buttons a {
border-radius: 50%;
background: #CCC;
background: -webkit-linear-gradient(top, #CCCCCC, #F3F3F3); /* webkit*/
background: -moz-linear-gradient(top, #CCCCCC, #F3F3F3); /* firefox 3.6+ */
background: -o-linear-gradient(top, #CCCCCC, #F3F3F3); /* opera */
background: -ms-linear-gradient(top, #CCCCCC, #F3F3F3); /* IE10 */
background: linear-gradient(top, #CCCCCC, #F3F3F3); /* css3 */
}
a.cs-active {
background: #599BDC;
background: -webkit-linear-gradient(top, #599BDC, #3072B3); /* webkit*/
background: -moz-linear-gradient(top, #599BDC, #3072B3); /* firefox 3.6+ */
background: -o-linear-gradient(top, #599BDC, #3072B3); /* opera */
background: -ms-linear-gradient(top, #599BDC, #3072B3); /* IE10 */
background: linear-gradient(top, #599BDC, #3072B3); /* css3 */
border-radius: 50%;
box-shadow: 0 0 3px #518CC6;
border: 1px solid #3072B3 !important;
}
Однако если мы захотим изменить внешний вид лишь части кнопок, либо их разметку то такой метод не подойдет. Благо все исходные коды на руках. Открываем файл сoin-slider.js и комментируем(удаляем) там следующие строки:
// image buttons
$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
for(k=1;k<images[el.id].length+1;k++){
$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
}
и
$("#cs-buttons-"+el.id).css({
'left': '50%',
'margin-left' : -images[el.id].length*15/2-5,
'position' : 'relative'
});
что нам это дает? Кнопки навигации, как таковые, создаваться не будут. Однако если они есть в блоке слайдера, то на них и будут повешены события. Т.е. нам ничего не стоит создать их "руками", с любой разметкой и оформлением. Важно лишь придерживаться правила:в названии класса должно присутствовать .cs-button- плюс id самого слайдера а id тоже самое + номер слайда к которому мы хотим привязать кнопку.. Для примера создадим три кнопки навигации для первых 3 слайдов в виде обычных кнопок.
<input type="button" class="cs-button-coin-slider" id="cs-button-coin-slider-1" value="1"/> <input type="button" class="cs-button-coin-slider" id="cs-button-coin-slider-2" value="2"/> <input type="button" class="cs-button-coin-slider" id="cs-button-coin-slider-3" value="3"/>
Разумеется, для этих кнопок надо будет прописать отдельные стили т.к. в оригинале они прописаны лишь для навигации в виде ссылок <a class="cs-button-coin-slider" >
quot;cs-button-coin-slider
Комментарии
Хотелось бы, чтобы он корректно отображался и на планшетах, и на смартфонах.
Также непонятно по настройкам: очень круто, что их так много и они такие гибкие... но где они меняются??
jQuery("#coin-slider").coinslider({width: 500,
height: 300,
spw: 5,
sph: 4
});