Question

Any way to show counter in ResponsiveSlides image

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>
Was it helpful?

Solution

//html / php

<ul id="rslides<?=$j?>" class="rslides slider" rel="<?=$j?>">
 image list here
</ul>

//js

$(".rslides").each(function() {
var id = $(this).attr('rel');

        $("#rslides"+id).responsiveSlides({
            auto: false,
            nav: true,
            speed: 500,
            maxwidth: 800,
            namespace: "unitSlides",
            after: function(){
                console.log(this);
                $("#slider_counter_"+id).html($(".slider").find("li#" + $("." + this.namespace + id +"_on").attr("id")).index() + 1);
            } 
        });
    });

OTHER TIPS

Try this

$(document).ready(function() {

    $("#slider").responsiveSlides({
        speed: 500,
        auto: false,
        before: function(){}, // Function: Before callback
        after: function(){
            $(".current").html($(".slider").find("li#" + $("." + this.namespace + "1_on").attr("id")).index() + 1);
        } // Function: After callback
    });

    // Total amount of images and apply to div
    $(".total").html($(".slider li").index() + 1);

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top