CustomSlider — скрыпт, што дазваляе стварыць унікальны слайдар для загалоўнай, выставіць у вікі-разметцы кол-у слайдаў, хуткасць пераключэння, становішча кнопак (злева\справа\зверху\знізу) і г. д. Выгляд цалкам наладжваецца праз CSS. Пры навядзенні курсора на слайд аўтапераключэнне спыняецца. Апроч аўтапераключэння можна клікаць ручна па слайдах.
Ўстаноўка[]
Імпартуйце код з 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" 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)"
- Sld - (звычайны слайд)
- Sld SlideIMG - слайд з маштабаваннем пад шырыню экрана (рэкамендуецца скарыстаць гэты варыянт для ўсіх слайдаў)
- NavBtn - для кнопкі меню
- nmLeft, nmRight, nmTop, nmBottom - месцаванне кнопак меню (выраўнанне: [няма] - па змаўчанні, nmP2 - цэнтр, nmP3 - процілеглы бок)
- nbActiveLeft, nbActiveRight, nbActiveTop, nbActiveBottom - nbActiveLeft, nbActiveRight, nbActiveTop і nbActiveBottom - стыль актыўнай кнопкі
- Каб пазбегнуць соступаў паміж кнопкамі меню пры гарызантальным месцаванні, элементы спіса [li] трэба запісваць у адзін радок.
Часовы развязак праблем[]
Для выпраўлення багаў з адлюстраваннем вышыні:
- У SliderData - скарыстайце толькі маштабаванне вышыні. auto
- У CSS - дадайце параметр
.SlideIMG {
height: 400px !important;
}