На просторах интернета нашел один очень симпатичный слайдер изображений COIN SLIDER, работающий на jQuery. Его можно скачать как на официальном сайте так и на xdan'е. Всякое бывает, проект забросят или сайт пропадет, именно поэтому выкладываю public скрипты у себя на сайте, но все же настоятельно советую качать такие вещи с оффсайтов. Слайдер вырос из другого подобного плагина того же автора jqFancyTransitions

Симпотичнчый COIN SLIDER на Jquery с великолепным эффектом перехода

И так, что он умеет.

Плагин совместим с 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

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Guest
# Guest 05.05.2013 17:01
Большое спасибо! Все просто и понятно
Ольга
# Ольга 12.07.2013 03:17
Приветик! Супер слайдер, хороший урок! Один только вопрос, можно ли его сделать как-то респонсивным?????

Хотелось бы, чтобы он корректно отображался и на планшетах, и на смартфонах.
Leroy
# Leroy 12.07.2013 23:15
а как он отображается? там эффекты применяются возможно которые не поддерживают мобильные браузеры. пока придется довольствоваться чем нибудь попроще
aaa
# aaa 03.08.2013 20:45
Почему не вложить все файлы-исходники в один архив? Например для меня фраза "Загружаем jQuery," ни о чем не говорит и где брать подключаемый в самом начале "jquery-1.7.1.js" непонятно.
Также непонятно по настройкам: очень круто, что их так много и они такие гибкие... но где они меняются??
Leroy
# Leroy 04.08.2013 15:04
jquery это самая распространенная библиотека в сети, не знают про нее разве что школьники. Вы меня сильно удивляете. jquery вот тут написано как использовать настройки
jQuery("#coin-slider").coinslider({ 
width: 500,
height: 300,
spw: 5,
sph: 4
});
ulan
# ulan 04.09.2013 20:31
Плагин хороший, но почему-то на ie9, 10 не пашет... Как можно исправить не подскажете?
Leroy
# Leroy 04.09.2013 22:34
в 10-м полет нормальный, все работает
Ivan
# Ivan 25.09.2013 06:25
Спасибо, разжевано отлично, НО: нашел статью именно потому, что нужны были круглые кнопки, однако после применения вышеуказанных CSS строк - кнопки стали вертикальными и элипсообразными, плюс еще внутри нумеруются! Буду очень благодарен за помощь!
Azamat
# Azamat 29.05.2014 13:11
Добрый день, как сделать ширину слайдера резиновой, точнее чтобы ширина автоматический подгонялась под экран?