[RESOLVED]Nivoslider Jquery

I have nivoslider in my project. In that banner should slide in random manner (Now it is sliding in a serial wise)

Please find the code for your reference:-

<script type="text/javascript">
            jQuery(window).load(function () {
                jQuery('#slider').nivoSlider({
                    pauseTime: 5000,
                    effect: 'fold', //Specify sets like: 'fold,fade,sliceDown'
                    slices: 1
                });
            });
        </script>
        <script type="text/javascript" charset="utf-8">
            jQuery(document).ready(function () {
                jQuery("a[rel^='prettyPhoto']").prettyPhoto({ theme: 'light_rounded' });
            });
</script>

Here is the detailed post about how to show random images in nivo slider:

http://www.soslignes-ecrivain-public.fr/Convert-Nivo-slider-to-a-random-slideshow.html

Here is the detailed article about how to create Nivo slider with database in asp .net:

http://www.codingfusion.com/Post/Dynamic-Nivo-Responsive-Image-slider-with-database

This blog post discusses a function that you can write to handle "shuffling" your NivoSlider elements into a random order prior to using the slider :

<script type='text/javascript'>
    $(document).ready(function() {
      $('.nivoSlider').Shuffle('img');
    });

    (function($) {
        $.fn.Shuffle=function(childEl) {
          this.each(function() {
          var $this=$(this), els=$this.children(childEl);
          els.sort(function() {return (Math.round(Math.random())-0.5);});  
          $this.empty();  
          for(var i=0; i<els.length; i++) $this.append(els[i]);});    
        };
    })(jQuery);
</script>

So all you would need to do would be to change your existing code to the following :

<script type="text/javascript">
    $(function () {
         // When your scripts have loaded, set up your pretty photo and shuffle your images
         $("a[rel^='prettyPhoto']").prettyPhoto({ theme: 'light_rounded' });
         $('#slider').Shuffle('img');
    });

    // When the page finishes loading, set up your nivoSlider (which should already be randomly ordered)
    $(window).load(function () {
         $('#slider').nivoSlider({ pauseTime: 5000, effect: 'fold', slices: 1 });
    });
    
    (function($) {
         $.fn.Shuffle=function(childEl) {
            this.each(function() {
            var $this=$(this), els=$this.children(childEl);
            els.sort(function() {return (Math.round(Math.random())-0.5);});  
            $this.empty();  
            for(var i=0; i<els.length; i++) $this.append(els[i]);
         });    
   };})(jQuery);
</script>

It should be noted that the slider also supports a randomStart attribute that will randomly select a slide to start on as mentioned in the
documentation :

$('#slider').nivoSlider({ pauseTime: 5000, effect: 'fold', slices: 1, randomStart: true });

Hi Rion,

I tried your code, but it doesnt show slider over their and continuously loading slider part.

Could you post what the current code you are using is? You might also want to consider checking the Console area within your browser using the available Developer Tools (F12) to see if any errors are present.

Leave a Reply