Finite image slider
Reading time: 4 – 6 minutes
I’ve been asked to come up with an image slider prototype for something new we were doing at work.
I would generally just find a suitable sliding jQuery plug-in and get the developers to use it. However, this time, there were two very peculiar requirements necessary for this slider (hence why I was asked to prototype it)
I then came across to Nivo Slider(http://nivo.dev7studios.com/), which claims to be the “The world’s most awesome jQuery & WordPress Image Slider”. I can’t really comment on that statement, but I can tell you they’re pretty good, and have lots of different options for you to use in your image sliders, as well as allowing various transitions between each slide.
Implementing it was very straightforward, as all you need to do is import their css, chose a css theme and the plug-in itself (I’ll assume you already have jQuery installed)
My code then ended up looking like this:
The code above will pretty much get you going, and your images should now load nicely on the screen, and you should be able to slide through them.
However, when you do it, you will notice none of the requirements mentioned above have been fulfilled, since you ended up with an image slider.
To get the arrows to show and hide dynamically, I did a bit of research and found someone doing that exact same thing. So it was just a matter of adding that to my code, and attaching it to the “afterChange” event, which will get called every time you click through any of the arrows.
I’ve been asked to come up with an image slider prototype for something new we were doing at work.
I would generally just find a suitable sliding jQuery plug-in and get the developers to use it. However, this time, there were two very peculiar requirements necessary for this slider (hence why I was asked to prototype it)
- The image slider should only display the next and previous arrow when there was something to display. It should hide the arrows if it didn’t have a next or a previous item to display.
- Ordinarily image sliders are infinite, which means you can keep clicking next forever, and it will always loop through the images. This alone negates the requirement above, since you always have a previous and a next image. So I had to somehow limit the image slider to only go up to the last image when clicking forward, and stop at the first image when rewinding.
I then came across to Nivo Slider(http://nivo.dev7studios.com/), which claims to be the “The world’s most awesome jQuery & WordPress Image Slider”. I can’t really comment on that statement, but I can tell you they’re pretty good, and have lots of different options for you to use in your image sliders, as well as allowing various transitions between each slide.
Implementing it was very straightforward, as all you need to do is import their css, chose a css theme and the plug-in itself (I’ll assume you already have jQuery installed)
My code then ended up looking like this:
<link rel="stylesheet" href="theme/default.css" type="text/css" media="screen" /><link rel="stylesheet" href="theme/nivo-slider.css" type="text/css" media="screen" /><script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider"><img src="images/image_1.jpg" alt="" title="" /><img src="images/image_2.jpg" alt="" title="" /><img src="images/image_3.jpg" alt="" title="" /><img src="images/image_4.jpg" alt="" title="" /><img src="images/image_5.jpg" alt="" title="" /></div></div><script type="text/javascript">$(window).load(function() {$('#slider').nivoSlider({directionNavHide: true,manualAdvance: true,directionNav: true,controlNav: false})});</script>
However, when you do it, you will notice none of the requirements mentioned above have been fulfilled, since you ended up with an image slider.
To get the arrows to show and hide dynamically, I did a bit of research and found someone doing that exact same thing. So it was just a matter of adding that to my code, and attaching it to the “afterChange” event, which will get called every time you click through any of the arrows.
<script>function arrowsCtrl () {var SlideNo = jQuery('#slider').data('nivo:vars').currentSlide;var TotalSlidesNo = jQuery('#slider').data('nivo:vars').totalSlides;if (SlideNo==TotalSlidesNo-1) {jQuery('#slider .nivo-nextNav').hide();jQuery('#slider').data('nivoslider').stop();};if (SlideNo==TotalSlidesNo-2) {jQuery('#slider .nivo-nextNav').show();jQuery('#slider').data('nivoslider').start();};if (SlideNo==1) jQuery('#slider .nivo-prevNav').show();if (SlideNo==0) jQuery('#slider .nivo-prevNav').hide();};</script>
