Features:
- Free to use under MIT licence
- Compatible with Android and iPhone
- Unique transition effects
- Valid markup
- Flexible configuration
- Auto slide
- Navigation box
- Lightweight (8kb only)
- Linking images
- Fully customizable using CSS
Что означает MIT license - объяснять здесь не будем; если попросту и очень коротко - это означает для нас с вами, что слайдер бесплатен и исходники его мы можем без проблем скачать с сайта разработчика, welcome... ну, или здесь.
Установка слайдера замечательно несложна: вам придется лишь самостоятельно скачать jquery, загрузить js и css (это архив, распаковать не забудьте, ссылка выше); все это укладываем в спецом созданный каталог и кидаем куда-нибудь в корень сайта.
Ок, теперь самое интересное. Для многочисленных неутомимых джумловодов порядок действий проблем, думаю, не вызовет совершенно: создаем новый mod_custom, в который вписываем следующие строчки кода:
Прежде всего, подключаем скачанные js и стили:
<script type="text/javascript" src="/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/coin-slider.min.js"></script>
<link rel="stylesheet" href="/coin-slider-styles.css" type="text/css" />
Теперь - картинки (которые в приведенном примере расположены, как видите, в каталоге coin-slider:
<div id='coin-slider'>
<a href="/img01_url" target="_blank">
<img src='coin-slider/01.jpg' >
<span>
Описание изображения №1
</span>
</a>
<a href="/imgN_url">
<img src='coin-slider/02.jpg' >
<span>
Описание изображения №2
</span>
</a>
<a href="/imgN_url">
<img src='coin-slider/03.jpg' >
<span>
Описание изображения №3
</span>
</a>
<a href="/imgN_url">
<img src='coin-slider/04.jpg' >
<span>
Описание изображения №4
</span>
</a>
</div>
И, наконец, инициализация плагина:
<script type="text/javascript">
jQuery(function() {
$('#coin-slider').coinslider({ width: 600, height: 450 });
});
</script>
Стало быть, так; все три фрагмента кода можно тупо поочередно скопировать в mod_custom, один за другим, не забыв лишь изменить прописанные пути таким образом, чтобы они действительно указывали на ваши картинки и скрипты. В самых последних строчках я указал, как видите, размеры окна слайдера; также не поленитесь указать свои.
В принципе, все; работать уже должно. Для продвинутого сайтовладельца предусмотрен немалый ряд параметров инициализации:
- 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, // останавливать автоматическое слайдшоу при наведении на слайдер
B еще - целая куча подробностей/примеров на сайте разработчика Coin Slider. Настройки слайдера впечатляют, при желании вы сумеете полностью подогнать его внешний вид под свои задачи. Enjoy!
