CustomSlider — скрипт, що дозволяє створити унікальний слайдер для головної сторінки, виставити в вікі-розмітці кількість слайдів, швидкість перемикання, розташування кнопок (ліворуч\праворуч\угорі\унизу) тощо. Зовнішній вигляд повністю налаштовується через CSS. При наведенні курсора на слайд автопереключення зупиняється. Окрім автопереключення можна клікати вручну по слайдах.
Installation
Скопіюйте код CSS CustomSlider.css на свою вікі.
Example
Меню з кнопками праворуч
<div id="SliderView">
<div id="SliderData" class="4|3000|auto" style="display:none"></div>
<ul id="SliderWrapper">
<li class="Sld SlideIMG">[[File:Slide1.png]]</li>
<li class="Sld SlideIMG">[[File:Slide2.png]]</li>
<li class="Sld SlideIMG">[[File:Slide3.png]]</li>
<li class="Sld SlideIMG">[[File:Slide4.png]]</li>
</ul>
<ul id="NavBtns" class="nmRight">
<li class="NavBtn nbActiveRight">1 слайд</li>
<li class="NavBtn">2 слайд</li>
<li class="NavBtn">3 слайд</li>
<li class="NavBtn">4 слайд</li>
</ul>
</div>
Меню з кнопками-точками по центру унизу
<div id="SliderView">
<div id="SliderData" class="4|2000|auto" style="display:none"></div>
<ul id="SliderWrapper">
<li class="Sld SlideIMG">[[File:Slide1.png]]</li>
<li class="Sld SlideIMG">[[File:Slide2.png]]</li>
<li class="Sld SlideIMG">[[File:Slide3.png]]</li>
<li class="Sld SlideIMG">[[File:Slide4.png]]</li>
</ul>
<ul id="NavBtns" class="nmBottom nmP2"><li class="NavBtn nbActiveBottom">•</li><li class="NavBtn">•</li><li class="NavBtn">•</li><li class="NavBtn">•</li></ul>
</div>
Menu with bottom image buttons
<div id="SliderView">
<div id="SliderData" class="4|2000|auto|down" style="display:none"></div>
<ul id="SliderWrapper">
<li class="Sld SlideIMG">[[File:Slide1.png]]</li>
<li class="Sld SlideIMG">[[File:Slide2.png]]</li>
<li class="Sld SlideIMG">[[File:Slide3.png]]</li>
<li class="Sld SlideIMG">[[File:Slide4.png]]</li>
</ul>
<ul id="NavBtns" class="nmBottom nmP2">
<li class="NavBtn nbActiveBottom">[[File:Slide1.png|70px|link=]]</li>
<li class="NavBtn">[[File:Slide2.png|70px|link=]]</li>
<li class="NavBtn">[[File:Slide3.png|70px|link=]]</li>
<li class="NavBtn">[[File:Slide4.png|70px|link=]]</li>
</ul>
</div>
Параметри вікі-розмітки
- SliderData - додаткові параметри (необов'язковий): class="<кількість кнопок>|<slide interval>|висота (auto)|<animation up down> (down)"
- Sld - (звичайний слайд)
- Sld SlideIMG - слайд з масштабуванням під ширину екрану (рекомендується використовувати цей варіант для всіх слайдів)
- NavBtn - для кнопки меню
- nmLeft, nmRight, nmTop, nmBottom - розташування кнопок меню (вирівнювання: [немає] - за замовчуванням, nmP2 - центр, nmP3 - протилежний бік)
- nbActiveLeft, nbActiveRight, nbActiveTop, nbActiveBottom - стиль активної кнопки
- Аби запобігти відступам між кнопками меню при горизонтальному розташуванні, елементи списку [li] потрібно записувати в один рядок.