Home/ Questions/Q 8213961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:17:51+00:00

I have added a Jquery slider (called SudoSlider) to my website, with ‘previous’ and

  • 0

I have added a Jquery slider (called SudoSlider) to my website, with ‘previous’ and ‘next’ buttons that allow users to advance to the next slide, or go back one. I would, however, like to make it so that the slides change automatically.

I have come across questions that are similar to this, but my Javascript is rather limited and so I’m unable to use the codes given to other users.

If anybody can help me achieve this I would be very grateful.

Please see this JSFiddle here for the codes used.

Also, the slider can be seen in action here if the JSFiddle is of no use.

Thanks very much in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the working fiddle: http://jsfiddle.net/surendraVsingh/VN7F8/1/

    I just changed the sequence of loading javascript. Below is the complete HTML with javascript included & include external css u have.

    HTML Changes:

    <html>
  <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript" src="http://www.pinknoise-systems.co.uk/userfiles/jquery/slider/js/jquery.sudoSlider.min.js"/></script>
<script type="text/javascript">
    $(document).ready(function(){    
            var sudoSlider = $("#slider").sudoSlider();
     });    
</script>
</head>
<body>
<div id="container">
    <div style="position:relative;">
        <div id="slider">
            <ul>                
                <li>
                    <div style="margin:0 auto;text-align:center;height:300px;">
                        <img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_6.png" />
                    </div>
                </li>
                <li>
                    <div style="margin:0 auto;width:620px;height:300px;background:url('http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_5.png');">

                    <div class="product_row_1">
                        <div class="one">
                        <a href="http://www.pinknoise-systems.co.uk/Sennheiser_SKP_300_G3--product--1091.html" class="slide_product_name">Sennheiser SKP 300 G3</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/Sennheiser_SKP_300_G3--product--1091.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/skp300.jpg" /></a></div>
                        <div class="p-content">
                            <img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
                            <p class="slide_product_price">£296.00</p>
                             <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="two margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/Fostex_PM841_Professional_Studio_Monitor--product--1110.html" class="slide_product_name">Fostex PM8.4.1</a>
                        <div class="p-image"><a href="href="http://www.pinknoise-systems.co.uk/Fostex_PM841_Professional_Studio_Monitor--product--1110.html""><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/pm841.jpg" /></a></div>
                        <div class="p-content">
                            <img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
                            <p class="slide_product_price">£412.50</p>
                           <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="three margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/Delkin_Wingman_HD_3oz_Waterproof_Action_Camera--product--850.html" class="slide_product_name">Delkin Wingman</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/Delkin_Wingman_HD_3oz_Waterproof_Action_Camera--product--850.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/wingman.jpg" /></a></div>
                        <div class="p-content">
                            <div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
                            <p class="slide_product_price">£179.19</p>
                            <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                    </div>


                    <div class="product_row_2">
                        <div class="one">
                        <a href="http://www.pinknoise-systems.co.uk/DFocus_Street_Runner_Bundle--product--1104.html" class="slide_product_name">D|Focus Street Runner Kit</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/DFocus_Street_Runner_Bundle--product--1104.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/streetrunnerbundle.jpg" /></a></div>
                        <div class="p-content">
                            <div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
                            <p class="slide_product_price">£332.50</p>
                            <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="two margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/DFocus_Field_Runner_Bundle--product--1105.html" class="slide_product_name">D|Focus Field Runner Kit</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/DFocus_Field_Runner_Bundle--product--1105.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/fieldrunnerkit.jpg" /></a></div>
                        <div class="p-content">
                            <div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
                            <p class="slide_product_price">£382.50</p>
                             <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="three margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/DFocus_Austin_Rig_Bundle--product--1106.html" class="slide_product_name">D|Focus Austin Rig Bundle</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/DFocus_Austin_Rig_Bundle--product--1106.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/austinrigbundle.jpg" /></a></div>
                        <div class="p-content">
                            <img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
                            <p class="slide_product_price">£499.17</p>
                            <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                    </div>

                    </div>
                </li>    
            <li>
                    <div style="margin:0 auto;text-align:center;">
                        <img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_3.jpg" />
                    </div>
                </li>

                <li>
                    <div style="margin:0 auto;text-align:center;">
                        <img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_4.jpg" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</body>
</html>

    ​

    • 0