На просторах интернета нашел один очень симпатичный слайдер изображений 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" /> |
Далее добавляем в страницу нужные изображения. В таком формате
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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
1 2 3 4 5 | <script type="text/javascript">jQuery(function() { $('#coin-slider').coinslider();});</script> |
Настройки
При инициализации плагина доступны ряд настроек:
1 2 3 4 5 6 7 8 9 10 11 12 | width: 565, // ширина слайдераheight: 290, // высота слайдераspw: 7, // количество разбиений по ширинеsph: 5, // количество разбиений по высотеdelay: 3000, // задержка между сменой слайдовsDelay: 30, // задержка анимации затуханияopacity: 0.7, // прозрачность описания и кнопок навигацииtitleSpeed: 500, // скорость появления описанияeffect: '', // эффекты random, swirl, rain, straightnavigation: true, // наличие на слайдере кнопок вперед и назадlinks : true, // делать изображения как ссылкиhoverPause: true// останавливать автоматическое слайдшоу при наведении на слайд |
к примеру если фото для слайдера будут в ширину 500px то и ширину слайдера надо сделать такой же.
1 2 3 4 5 6 | jQuery("#coin-slider").coinslider({ width: 500, height: 300, spw: 5, sph: 4}); |
Кроме того, хотя плагин и кроссбраузерный, однако скорость его работы в некоторых браузерах оставляет желать лучшего. Связано это с его эффектом разбиения изображений. Чудес не бывает, canvas'ом тут и не пахнет. Плагин создает кучу блоков, каждому из которых ставит определенную часть изображения в качестве фона. Т.е. если по умолчанию у нас разбиение 7*5=35, то плагин создаст 35 копий данного изображения. Поэтому имеет смысл для особо медленных браузеров понижать параметры разбиения
1 2 3 4 5 6 7 8 9 10 | if (jQuery.browser.msie == true)jQuery("#coin-slider").coinslider({ spw: 3, sph: 3})elsejQuery("#coin-slider").coinslider({ spw: 8, sph: 8}); |
Бывает, что автоматическое слайд шоу не всегда необходимо. Параметра полного отключения в слайдере я так и не нашел, но выход все же есть: просто ставим параметр delay где-нибудь около 10000000.
1 2 3 | jQuery("#coin-slider").coinslider({ delay:1000000000}); |
Для усиления WOW эффекта у слайдера есть выбор между 3 перходами: swirl - завихрение, rain - дождь (картинка меняется мозаикой), straight - лесенка. Плюс можно указать в качестве параметра random, тогда на каждый слайд будет выбрана случайная анимация перехода. По умолчанию включен именно random.
Оформление
Плагин очень гибкий по части оформления, все стили навигации вынесены в отдельный файл coin-slider-styles.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .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 и комментируем(удаляем) там следующие строки:
1 2 3 4 5 | // 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>");} |
и
1 2 3 4 5 | $("#cs-buttons-"+el.id).css({ 'left': '50%', 'margin-left' : -images[el.id].length*15/2-5, 'position' : 'relative' }); |
что нам это дает? Кнопки навигации, как таковые, создаваться не будут. Однако если они есть в блоке слайдера, то на них и будут повешены события. Т.е. нам ничего не стоит создать их "руками", с любой разметкой и оформлением. Важно лишь придерживаться правила:в названии класса должно присутствовать .cs-button- плюс id самого слайдера а id тоже самое + номер слайда к которому мы хотим привязать кнопку.. Для примера создадим три кнопки навигации для первых 3 слайдов в виде обычных кнопок.
1 2 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
});