• @colerise
  • @colerise
  • @colerise
  • RESPONSIVE
    TOUCH·FRIENDLY
    @colerise


Demos & Templates: 12345678910
Download
All demos & source code  (Release v2016.12.29)

FAQ

  1. How to disable the trial version alert?

    Please refer to the License section at the bottom of this page.

  2. How to make the slider 100% full-width?
  3. Transitional Effect for Captions
  4. Add videos / audios

    The Ninja Slider supports embedding YouTube, Vimeo, and HTML videos/audios.

    Please visit Demo 5: Support Youtube, Vimeo, and HTML videos/audios for details.

  5. Use different pixel images for different devices

    If you want different sized devices to load different pixel images, you can add multiple vesions of slide images. For example:

    <li> <a class="ns-img" href="img/1.jpg" data-screen="450-max"></a> <a class="ns-img" href="img/1-small.jpg" data-screen="0-449"></a> </li>

    Then if the device screen is less than 450 pixel wide, the slider will only load the image 1-small.jpg.

    Note: This feature can only be tested with real devices as the size specified here is the device size, not the browser size.

    Another similar feature: you can use low resolution images for the image slider, and use high resolution images when the slider is enlarged to fullscreen mode. Visit Demo 7 for details.

  6. What if my gallery images have different aspect ratios?

    Please refer to the aspectRatio option in this page (the JavaScrip section).


License Fee: $29.00
About License
for any of the 9 Ninja Slider templates

Ninja Slider: Responsive Image Slideshow, touch-enabled and mobile-friendly

Features

Usage

Click the download button to get the demo's source code: HTML, CSS and JavaScript files. Then copy them into your own project.

  1. HTML

    <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="ninja-slider.css" rel="stylesheet" /> <script src="ninja-slider.js" type="text/javascript"></script> </head> <body> <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="/"><img class="ns-img" src="img/3.jpg"></a></li> </ul> </div> </div> </body> </html>

    • Viewport meta tag

      Ninja slider has a good support for responsive layout, and responsive layout usually reqires the viewport tag:

      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    • Any HTML content

      Every <li> element will be treated as a slide. It can contain any HTML content, even no slide image at all. Examples:

    • Scalable image, lazy load

      <a class="ns-img" href="1.jpg">image description</a> But if you want to link the image, you should avoid using the <a> tag for the image. read more...

      Usually the slide image is defined by an anchor tag with the class="ns-img":<a class="ns-img" href="1.jpg">image description</a>

      Then the slider script will set the anchor's background with the image specified in the href attribute at the time when the slide is the next slide. It is responsive, SEO friendly, and lazy-loaded.

      When you want to wrap the image with a link, as it is illegal to nest <a> tags (<a href="..."><a>...</a></a>), you should use other tags such as:

      <span class="ns-img" style="background-image:url(1.jpg)"></span> The background image of the span element is still responsive as a result of its "ns-img" class, but it is not lazy loaded anymore.

      Or use the <img> tag directly:

      <img class="ns-img" src="1.jpg">

      For more details please read this post: Add Links inside the slider

    • Nav controls

      By default the ninja-slider.js will add the nav arrows and the pager (nav bullets) automatically. add menually...

      The nav buttons are automatically generated:

      <div id="ninja-slider-prev"></div> <div id="ninja-slider-next"></div> <div id="ninja-slider-pause-play"></div> <div id="ninja-slider-pager">...(for details about the nav bullets, please read the "The pager(nav bullets)" at the bottom of this page)...</div>

      So you just need to open the ninja-slider.css file, and customize their styles.

      For example: Show up the Pause/Play buttons

      If you prefer to place the nav buttons at a specific place, or to include them in a wrapper so that you can customize their styles easier, you can add them manuanlly:

      For details, please refer to the source code of demo2.html in the download package.

    • Fullscreen button

      Fullscreen button, if required, need to be added manually:<div class="fs-icon" title="Expand/Close"></div>

      We can set the slider to use high resolution images when swtitching image slider to fullscreen mode.

    • Using different pixel images for different devices

      Please refer to the FAQ 5 in this page.

    • Support Youtube, Vimeo, and HTML videos/audios

  2. JavaScript

    Open the ninja-slider.js with Notepad, and customize the options:

    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, (...rarely used options) license: "(your license key)" }; var nslider = new NinjaSlider(nsOptions);
    Five options:
    • "fade": fade-in/out transition;
    • "slide": slide-in/out horizontally;
    • "slide vertical": slide-in/out vertically;
    • "zoom": zoom-out transition;
    • "kenburns 1.2": Ken Burns effect. You can update the 1.2 with another scale (greater than 1), such as "kenburns 1.1".
    • "none": no transition effect.

    true or false: automatically advance to the next slide

    Makes slider to go from last slide to first with rewind.

    Note: Only applicable when transitionType is "slide", or "slide vertical"

    Delay between items in ms. Its value can be:
    • number of milliseconds, e.g.
      delay: 4500
    • delay: "default"

      "default" will be converted to 3500 for "fade", "slide" and "slide vertical" transition, and 6000 for "zoom" and "kenburns" transition.

    You can set different delays to a specific slide by data-delay, e.g.

    <li data-delay="6500">...</li>
    Speed of the transition. Its value can be:
    • number of milliseconds, e.g.
      transitionSpeed: 300
    • transitionSpeed: "default"

      "default" will be converted to 300 for "slide" and "slide vertical" transition, 2000 for "fade", and 1500 for "zoom" and "kenburns" transition.

    1. If the slider images are 900px wide and 400px high, you can set the aspectRatio to "900:400", or "9:4".
    2. If you need the images to be responsive scaling based on window height, just set this value to be "?:100%". Visit Demo 10 for details.
    3. If the slider images are having different aspect ratios, you have the following options:

      1. Choose an aspectRatio("x:y") that fits best for most of the images.

        With this setting, the images that doesn't fit will follow the style rule specified in the ninja-slider.css file:

        #ninja-slider .ns-img { background-size:contain; }

        You can change it to background-size:cover in the stylesheet, or for a specific slide image, just override it with inline style in the HTML, e.g. <a class="ns-img" href="img2/5.jpg" style="background-size:cover;"></a>

      2. Or, just set: aspectRation:"auto"

        Then the slider will change its height for each current slide image. This may make the contents under the slider move up and down (some people may not like it).

    4. If slider image sizes are unknown, you can set it to "auto" as mentioned in above 2.b, or set it to:aspectRatio: "default" Then the slider will take the first image size (class="ns-img") as its aspectRatio that will be used for all images.
    5. If you are expecting different aspect ratios for different devices, please read this.

    In the ninja-slider.js you will see this line of code:

    var nslider = new NinjaSlider(nsOptions);

    It will init the slider and start the slider as soon as the page is ready (DOMContentLoaded event has been fired).

    However there are times that the slider should start at a later time, such as building the slider markup dynamically, or running the slider in a popup modal. There are two ways to start it after the page load:

    • Option 1: Set this initSliderByCallingInitFunc option to true
      Then the slider won't be instantiated until you explicitly call the init function:

      nslider.init(); You can also pass an index number to the function, e.g. init(2), then the slider will start from the 3rd slide. For details visit demo 8.

    • Option 2: Remove the line of code from the ninja-slider.js:

      var nslider = new NinjaSlider(nsOptions);

      And add it to the place where it is the time to run it.

      Note: the option initSliderByCallingInitFunc must be false if taking this second approach.

    true or false: Indicates if tapping on the screen (finger touch without swipe) will navigate to next slide when the device is touch-enabled.

    Note: It will be overridden to false if pauseOnHover is true.

    keyboardNav: true or false: Allows navigating slider with the keyboard left and right arrows.

    Callback function that runs at the beginning of each slide transition.

    Check out the section Built-in event handlers and functions below for details.

    Unlike other options that must present in the option list, the following rarely used options are not required unless you want to change its default value.

    • m: true or false (default is true if not set): Even if the transitionType has not been set to "slide", when the navigation is triggered manually such as by clicking the arrow buttons, or by swiping the slider with hand on mobile device, it will still be in "slide" transition. You can change this default behavior by setting m: false, then it will be in the transitionType that you have set.
    • n: true or false (default is true if not set): If true, the Prev/Next nav buttons will be disabled when the first or the last slide is active, and under this condition the slider won't move when the Prev/Next button is clicked. Setting it to false will force the Prev/Next buttons not to be disabled and always respond to the click, and the slider will switch to the previous or next slide.
    • pauseOnHover: true or false(default): pause advancing to the next slide when mouse is over the slider.
      Note: navigateByTap will be disabled if pauseOnHover is true.
       
    Please refer to the License section at the bottom of this page.

    Plugin for playing Videos / Audios

    If the slider contains videos or audios, the ninjaVideoPlugin.js is also required. For details please read: Support Youtube, Vimeo, and HTML videos/audios.

    Built-in event handlers and functions

    If you need the API to further customize the slider:

  3. Customize the stylesheet

    • Make the slider full-width (100%)

      Just remove the max-width setting in the ninja-slider.css, e.g. #ninja-slider div.slider-inner { max-width:800px; }

    • Hide nav arrows on mobiles

      • Selectors

        Some navs are generated by the slider script with the ID of slider ID + suffix:
        Note: You can manually add them if you like (see demo2.html).

        • ninja-slider-prev
        • ninja-slider-pause-play
        • ninja-slider-next
        • ninja-slider-pager

      • Hide nav buttons on mobile phones

        As users can navigate the slider by swipe or tap on the mobile screens, we need to hide the navs on mobiles:

        @media only screen and (max-width:500px) { #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager { display:none; } }
        You can place arrow buttons outside the slider, and if the browser size is close to the slider width, move them inside (Example: demo 3)

        • Outside

          /* Within a media query: */
          #ninja-slider-prev {left: -100px;}
          #ninja-slider-next {right:-100px;}

        • Inside

          /* Within a media query: */
          #ninja-slider-prev {left: 2px;}
          #ninja-slider-next {right:2px;}
    • Transitional Effect for Captions

      The transitional effect of the captions can be easily configured by the transition or animation property in the stylesheet.

      Check out the stylesheet of demo 1 and demo 2 for details.

    • Show captions outside the slider

      Please refer to the last paragraph in Demo 8.

    • Image loading spinner

      You will see the image loading spiner when the image size is huge or the image cannot be found.

      The spinner is generated and controlled by the ninja-slider.js. Usually we don't need to take care of it.

    • Fullscreen button

      Please look at the stylesheet of demo 1, 4 and 5 in the download package.

    • The pager (nav bullets)

      The pager will have an ID that is the slider id plus "-pager". For example, if your slider id is "slider2", then its pager id will be "slider2-pager". In the following examples we assume the pager id is "ninja-slider-pager".

      By default, the Ninja Slider script will automatically create a pager and place it directly beneath the slider. The generated code will be:

      <div id="ninja-slider-pager"> <a rel="0">1</a> <a rel="1">2</a> ...... <a rel="n">n+1</a> </div>
      Note: You may not see the pager number as the ninja-slider.css has set it as:
      #ninja-slider-pager a { font-size:0; }
      The number will be visible if you give it a font-size, such as {font-size:10px;}

      Tweak#1: Remove the pager

      In ninja-slider.css, set:
      #ninja-slider-pager { display:none; }

      Tweak#2: Move the pager

      You can add a blank div, <div id="ninja-slider-pager"></div>, to a place in the page where you like it to appear. The slider script will find it and add bullets into it.

      Tweak#3: Can I have my own customized pager?

      Yes you can. Just add your own pager code to the page, eg.

      <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>

  4. License    


QUESTION & ANSWER
More ...

RECENT QUESTIONS

 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.

▲