Fandom

Wikia Developers Wiki

ResponsiveSlider

847pages on
this wiki
Add New Page
Talk0 Share

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

  • Carousel.

    23 messages
    • Yes! I am on Discord! I have tried working with the coding of the slider, but nothing has happened. It would be best to contact someone m...
    • Okey, I'll do that. Thank you very much! :) Tobias Alcaraz ...

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.