NicoNoClaste / Codes & Downloads / NicoNoSlider

NicoNoSlider

NicoNoSlider is a very light Jquery slider plugin whith plenty of options.

Live Demo

Documentation

Features :
- Responsive
- Infinite loop
- Transition : slide & fade
- Pagination : slides image, slides image as background or numbers
- Controls : inside or outside slider's container
- Auto slide direction
- Smartphones Swipe
- Mouse Swipe
- Show other slides beyond slider's container
- Callback function

Download last version (ver 2.7.6)

Compressed
production version
(28 KB) Uncompressed
development version
(52 KB)

How to use

head :

<!-- Use Jquery version 1.8.3 + -->
<script src="js/jquery-1.8.3.min.js"></script>
<!-- Call nicoNoSlider plugin file -->
<script src="js/nicoNoSlider.js"></script>

HTML :

<div id="slider">
   <img src="img/01.jpg" />
   <img src="img/02.jpg" />
   <img src="img/03.jpg" />
   <img src="img/04.jpg" />
   <img src="img/05.jpg" />
</div>

Javascript :

<script type="text/javascript">
   $(window).on('load', function(){ // the call must be made inside the 'load' event
      $('#slider').nicoNoSlider();
   });
</script>

// Which is equivalent to :

<script type="text/javascript">
   $(window).on('load', function(){
       $('#slider').nicoNoSlider({
         speed:500,
         auto:false,
         autoDirection:'next',
         infinite:true,
         transition:'slide',
         hoverStop:true,
         responsive:true,
         overflow:false,
         mouseDrag:false,
         controls:{
            prevInner:'',
            nextInner:'',
            out:false,
         },
         pagination:{
            pagInner:'',
         },
         callback:function(){},
      });
   });
</script>


// For multiple sliders with the same class name :
<script type="text/javascript">
   $(window).on('load', function(){
      $('.slider').each(function(){
         $(this).nicoNoSlider();
      });
   });
</script>

Options

GENERAL

Option name Type Default Exemple Description
speed int 500 400 Speed of the slide transition (in milliseconds)
auto int or false (bool) 4000 6000 Speed of the auto-slide (in milliseconds) or no auto-slide
hoverStop bool true false Stop auto slide on mouse hover
autoDirection string : 'next' or 'prev' prev next Direction of the auto Slide
infinite bool true false Infinite loop for the slider or no
transition string : 'slide' or 'fade' 'fade' 'slide' Transition effect of the slider
responsive bool true false Responsive slider
overflow bool false true hide or show not current slides (prev and next slides)
mouseDrag bool false true Allow next / prev slide with mouse swipe (click and drop right or left)

CONTROLS

Option name Type Default Exemple Description
controls bool true false Show or not next and prev buttons
prevInner string : ' ' or HTML '' '<img src="img/prev.png">' Text or HTML (ex : <img>) for prev btn
nextInner string : ' ' or HTML '' '<img src="img/next.png">' Text or HTML (ex : <img>) for next btn
out bool false true if true, the controls linkds will be placed outside the '.sliderInner' div

PAGINATION

Option name Type Default Exemple Description
pagination bool true false Show or not pagination buttons
pagInner string
'number' or 'image' or HTML		 'number' '<img src="img/pag.png" />' Show numerotation or sliders images or HTML (ex : <img />) as pagination

COMPATIBILIY

Tested desktops
IE (8～), Firefox (PC v.38～), Chrome (PC v.43～, MAC v.43～), Safari (MAC v.12～)
Tested mobile devices
Safari (Iphone4～, IOS 8.1～), Chrome (Iphone v.10～, Android v.11～)

Copyrights ©NicoNoClaste 2013 ～ 2024