Fandom Developers Wiki
Advertisement

CustomSlider — скрипт, позволяющий создать уникальный слайдер для заглавной, выставить в вики-разметке кол-во слайдов, скорость переключения, положение кнопок (слева\справа\сверху\снизу) и т.д. Внешний вид полностью настраивается через CSS. При наведении курсора на слайд автопереключение останавливается. Помимо автопереключения можно кликать вручную по слайдам.

Установка[]

Note: You will also need to add the CSS code from MediaWiki:CustomSlider.css to your wiki's MediaWiki:Common.css or:

Example[]

Меню с кнопками справа
CustomSlider
<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>
Меню с кнопками-точками по центру снизу
CustomSlider
<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
CustomSlider2


<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 - стиль активной кнопки
  • Чтобы избежать отступов между кнопками меню при горизонтальном расположении, элементы списка [li] нужно записывать в одну строку.

Временное решение проблем[]

Для исправления багов с отображением высоты:

  • В SliderData — используйте только масштабирование высоты. auto
  • В CSS — добавьте параметр
.SlideIMG {
     height: 400px !important;
}
Advertisement