Ninja Slider

Features

• Responsive layout
• Tap or swipe navigation on touch-enabled devices
• Supports YouTube, Vimeo, and HTML5 media
• Lazy loading of nearby images for smooth, seamless transitions

HTML

<div id="ninja-slider">
    <div class="inner">
        <ul>
            <li><a class="ns-img" href="img/1.jpg"></a></li>
            <li><a class="ns-img" href="img/2.jpg"></a></li>
            <li><a href="/home/"><img class="ns-img" src="img/3.jpg"></a></li>
        </ul>
    </div>
</div>

• Any HTML content

  Each <li> is a slide that can include any HTML content, even without an image. Examples: Demo 3, and Demo 8

• Add Links

  Click here to learn how to add a link to a slider image or slide elements.

  To add a link to a slider image, you can do it like this:

  <li>
      <a href="/home/">
          <img class="ns-img" src="img/3.jpg">
      </a>
  </li>

  If you need to add a link to a caption in a slide, you can:

  <li>
      <a class="ns-img" href="img/a.jpg"></a> 
      <div class="caption" onclick="window.open('/zoom-slider/')">
          Zoom
      </div>
  </li>

  If a slide doesn't need a hyperlink, you can:

  1. <li><a class="ns-img" href="img/1.jpg"></a></li>
  2. or: <li><img class="ns-img" src="1.jpg"></li>

  The first option is preferred as it supports lazy-loading of nearby images for smooth, seamless transitions.

• Navigation controls

  By default, ninja-slider.js automatically adds navigation arrows and a pager (nav bullets). To customize the navigation controls with your own styles, refer to the Adding Nav Controls Manually section in Demo 2.

• Fullscreen button

  The fullscreen button—which you can see when hovering over the demo slider at the top—needs to be added manually if required:<div class="fs-icon" title="Expand/Close"></div>

• Support Youtube, Vimeo, and HTML videos/audios

  See Demo 5 and Demo 6 for details.

JavaScript

Open ninja-slider.js in the download package and configure the options as needed:

var nsOptions = {
    sliderId: "ninja-slider", 
    transitionType: "slide", 
    autoAdvance: true, 
    rewind: true, 
    delay: "default", //or integer value such as: 3500
    transitionSpeed: "default", //eg. 500, 1200, or "default"
    aspectRatio: "9:6", 
    initSliderByCallingInitFunc: false, 
    shuffle: false, 
    startSlideIndex: 0, //0-based 
    navigateByTap: true, 
    keyboardNav: true, 
    before: null,
    (other options)
}; 
var nslider = new NinjaSlider(nsOptions);

Built-in functions

If you need to control the slider programmatically, click here for details.

Styles

• Make the slider full-width (100%)

  Remove the max-width setting in ninja-slider.css, for example: #ninja-slider div.slider-inner { max-width:800px; }

• Make the slider full-height (100%)

  If you want the slider to scale responsively based on window height, set value "?:100%" to the aspectRatio in ninja-slider.js. Example: Demo 10.

• Caption transition effects

  You can easily configure caption transitions using the transition or animation properties in your stylesheet.

  See the stylesheets for Demos 1 and 2 in the download package for examples.

• Display captions outside the slider

  Refer to the last paragraph in Demo 8 for details.

• Fullscreen button

  See the stylesheets for demo 1, 4, and 8 in the download package for fullscreen button styling.

• Pager (navigation bullets)

  By default, the Ninja Slider script automatically generates a pager and places it directly below the slider. The generated code looks like this:

  <div id="ninja-slider-pager"> 
      <a rel="0">1</a> 
      <a rel="1">2</a> 
      ...... 
      <a rel="n">n+1</a> 
  </div>

  Note: The pager numbers is invisible because ninja-slider.css sets:

  #ninja-slider-pager a { font-size:0; }

  The numbers will be visible if setting a different size, i.e. {font-size:10px;}

  
  

  Use case #1: Remove the pager

  In ninja-slider.css, set:

  #ninja-slider-pager { display:none; }
  

  Use case #2: Place the pager at your preferred position

  You can add a blank div, <div id="ninja-slider-pager"></div>, wherever you want the pager to appear. The slider script will find it and add the bullets.

  
  

  Use case #3: Customize your own pager

  You can create your own pager. For example:

  <div id="ninja-slider-pager">
      <a rel="0"><img src="bullet0.gif" /></a> 
      <a rel="1"><img src="bullet1.gif" /></a> 
      ...... 
      <a rel="4"><img src="bullet4.gif" /></a> 
  </div>

• Customize navigation arrows

  <div id="ninja-slider-prev" class=""><div>3 / 4</div></div>
  <div id="ninja-slider-next" class=""><div>3 / 4</div></div>

  You can check the #ninja-slider-prev and #ninja-slider-next selectors in ninja-slider.css to see how they are styled.

  • The 3 / 4 in the code above indicates the current slide number and total number of slides. You can make it visible by removing its display:none; or opacity: 0; settings.
  • You can add your own navigation arrows without using the default ones. Check the Demo 2: Adding Nav Controls Manually section for details.
  • You can place arrow buttons outside the slider, and move them inside when the browser size matches the slider width (see demo 6).
• Hide navigation arrows on mobile devices

  Since users can navigate the slider by swiping or tapping on mobile devices, you may want to hide the navigation buttons on smaller screens:

  @media only screen and (max-width:500px) { 
      #ninja-slider-prev, 
      #ninja-slider-next, 
      #ninja-slider-pager { 
          display:none; 
      } 
  }