CODEWITHSUNDEEP
jqueryhtmlcss
Kamdhenu Gaiya
Kamdhenu Gaiya

Reputation: 15

make slider automate by using jquery

here is a example Click please have a look on this ,I have used this plugin on my website but I am not able to do it automate ,want to make events automated .(do the thing whatever doing on click) please help me . the code is available on site Code is here

Upvotes: 0

Views: 409

Answers (2)

Tomzan
Tomzan

Reputation: 2818

You can do so by simply by triggering the click event on the 'a' element

<nav>
    <a id="asd" href="#" class="mi-selected">Shoes</a>
    <a href="#" class="">Accessories</a>
    <a href="#" class="">Watches</a>
    <a href="#" class="">Bags</a>
</nav>

Give the 'a' id, so you will be able to find it easily, and then use:

$('#asd').click();

** for this to work infinitely you can do something like this:

setInterval(function () {
    $('nav a').each(function(i){ 
        var aTag = this;
        setTimeout(function() { 
            $(aTag).click();
            }, 1500 * (i + 1)) 
    })
}, 6100);

Upvotes: 1

evilReiko
evilReiko

Reputation: 20473

First, make sure you have included the needed 4 files, if you forget to include any of them, the plugin will not work properly (and may not work at all):

  • jQuery 1.8.3 or higher
  • modernizr.custom.63321.js (custom build), it's included in the downloadable file
  • jQuery catslider.js (the plugin itself)
  • The CSS needed for the plugin (the file name is "style.css")

Place the below into your <head> tag, (make sure to replace "my_js_folder" and "my_css_folder" with your actual folder names):

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="/my_js_folder/modernizr.custom.63321.js"></script>
    <script src="/my_js_folder/jquery.catslider.js"></script>
    <link rel="stylesheet" type="text/css" href="/my_css_folder/style.css"/>
</head>

Now the imeplementation is pretty easy (make sure to include class "mi-slider" in the div):

<div id="myContainer" class="mi-slider">
    <!-- each ul is a section -->
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt="img01">Boots</a></li>
        <li><a href="#"><img src="images/2.jpg" alt="img02">Oxfords</a></li>
        <li><a href="#"><img src="images/3.jpg" alt="img03">Loafers</a></li>
        <li><a href="#"><img src="images/4.jpg" alt="img04">Sneakers</a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/5.jpg" alt="img05">Belts</a></li>
        <li><a href="#"><img src="images/6.jpg" alt="img06">Hats &amp; Caps</a></li>
        <li><a href="#"><img src="images/7.jpg" alt="img07">Sunglasses</a></li>
        <li><a href="#"><img src="images/8.jpg" alt="img08">Scarves</a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/9.jpg" alt="img09">Casual</a></li>
        <li><a href="#"><img src="images/10.jpg" alt="img10">Luxury</a></li>
        <li><a href="#"><img src="images/11.jpg" alt="img11">Sport</a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/12.jpg" alt="img12">Carry-Ons</a></li>
        <li><a href="#"><img src="images/13.jpg" alt="img13">Duffel Bags</a></li>
        <li><a href="#"><img src="images/14.jpg" alt="img14">Laptop Bags</a></li>
        <li><a href="#"><img src="images/15.jpg" alt="img15">Briefcases</a></li>
    </ul>
    <!-- the nav tag is the lower clickable links. the 1st link shows the 1st ul section, the 2nd link shows the 2nd ul section.. etc. So if you have 5 ul's, you must have 5 links in the nav tag -->
    <nav>
        <a href="#">Shoes</a>
        <a href="#">Accessories</a>
        <a href="#">Watches</a>
        <a href="#">Bags</a>
    </nav>
</div>
<script>
    // make sure the "myContainer" id in the script is the same id of the div
    $(document).ready(function() {
        $('#myContainer').catslider(); // this is the piece of code that will do the magic thing
    });
</script>

This a good-looking plugin, but it's badly designed, I strongly don't recommend this plugin!

Edit:

Simply, do this in the document ready:

<script>
    $(document).ready(function() {
        $('#mi-slider').catslider();
        // the automated effect
        setInterval(function() {
            if($('nav a.mi-selected').nextAll('a:first').length > 0) {
                $('nav a.mi-selected').nextAll('a:first').click();
            } else {
                $('nav a:first').click();
            }
        }, 3000);// 3000 = auotmate every 3 seconds
    });
</script>

Upvotes: 0

Related Questions