Foto 1 Foto 2 Foto 3 Foto 4 Foto 5
Features:



  • Lightweight
  • Flexible
  • Customizable
  • Released under MIT license
  • Compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +

Implementation:



Download the Choco-Slider (Javascript and CSS). Having done so, include them and the jQuery library on the site:

<link rel="stylesheet" href="chocoslider.css" type="text/css" />
<script type="text/javascript" src="jquery.chocoslider.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Add the next container, edit images, alt and title your question:

<div id="slider">
  <img src="img/img_1.jpg" alt="" title=""/>
  <img src="img/img_2.jpg" alt="" title=""/>
  <img src="img/img_3.jpg" alt="" title=""/>
  <img src="img/img_4.jpg" alt="" title=""/>
  <img src="img/img_5.jpg" alt="" title=""/>
</div>

Add the following before the closing </ head> to call Choco-Slider:

<script type="text/javascript">
  $(window).load(function() {
    $('#slider').chocoslider();
  });
</script>

Customization:



In case you do not customize the options, it automatically will use the default options:

auto:true, (if you want automatic slider)
autoPause:true, (to stop the slider after clicking)
speedStrip:500, (Speed between the strips)
effect:'random', (There are three types: 'slide', 'fade' and 'random')
numberStrips:15, (number of strips to show)
sliderDelay:3000, (time delay between images transition)
transparencytitle:0.8, (Transparency of the title)
bChange: function(){}, (function necessary to complete)
aChange: function(){}, (function necessary to complete)
chocoEnd: function(){}, (function necessary to complete)
controlNavigation:true (Removing only show images)

Examples:



Example Nº 1:

<script type="text/javascript">
  $(window).load(function() {
    $('#slider').chocoslider({
      auto:true,
      autoPause:true,
      speedStrip:500,
      effect:'effect1',
      numberStrips:15,
      sliderDelay:3000,
      transparencytitle:0.8,
      bChange: function(){},
      aChange: function(){},
      chocoEnd: function(){},
      controlNavigation:true
    });
  });
</script>

Example Nº 2:

<script type="text/javascript">
  $(window).load(function() {
    $('#slider').chocoslider({
      auto:true,
      autoPause:false,
      speedStrip:500,
      effect:'random',
      numberStrips:15,
      sliderDelay:6000,
      transparencytitle:1.0,
      bChange: function(){},
      aChange: function(){},
      chocoEnd: function(){},
      controlNavigation:false
    });
  });
</script>
  

Dessert:



Download
Language