FANDOM


ResponsiveSlider is a slider that automatically adapts itself to the size of any wiki. There is no need of jQuery for this script to run.

Installation

JavaScript

Add this line to your wiki's MediaWiki:ImportJS page.

dev:ResponsiveSlider/code.js

Style (CSS3)

Add this CSS import to the top of your wiki's MediaWiki:Common.css page.

  1. @import url('//dev.wikia.com/load.php?mode=articles&articles=ResponsiveSlider/code.css&only=styles');

Syntax

  1. <div class="jcarousel-wrapper">
  2.     <div class="jcarousel">
  3.         <div class="jcarousel-list">
  4.        
  5.             <!-- Content Item -->
  6.             <div class="jcarousel-item">
  7.                 <div class="banner-image nomobile">
  8.                     <!-- banner-box-left / banner-box-right -->
  9.                     <div class="banner-box banner-box-left" {{#if:{{{width|}}}|style="width:{{{width}}}"}}>
  10.                         <!-- Banner Title -->
  11.                         <div class="name">[[{{{title}}}|{{{alt-title|{{{title}}}}}}]]</div>
  12.                         <!-- Banner Subtitle -->
  13.                         <div class="type Foleo">[[{{{section-link}}}|{{{section}}}]]</div>
  14.                         <!-- Banner Description -->
  15.                         <div class="quote">[[{{{title}}}|{{{cite}}}]]</div>
  16.                     </div>
  17.                     <!-- Image Slider -->
  18.                     [[File:{{{image-file}}}|frameless|1700px|link={{{title}}}|{{{title}}}]]
  19.                 </div>
  20.             </div>
  21.             <!-- /Content Item -->
  22.  
  23.         </div>
  24.     </div>
  25.     <span class="jcarousel-control-prev">[[#|<span style="color:#888;text-decoration:none">&lsaquo;</span>]]</span>
  26.     <span class="jcarousel-control-next">[[#|<span style="color:#888;text-decoration:none">&rsaquo;</span>]]</span>
  27.     <p class="jcarousel-pagination"></p>
  28. </div>

Start a Discussion Discussions about ResponsiveSlider

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.