0

I am using and have modified an image slider/carousel and need some guidance one two things. I need to enable it to auto scroll through the images firstly. and secondly I need to have three words underneath that act as controls too. So if I click on one it will take me to that image in the slider with some text underneath?

Example Fiddle

(function() {
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
        carousel = $('.carousel');
    carousel.prepend(last.clone()).append(first.clone());
    carousel.width(itemWidth * $('.item').length);
    carousel.css({left: -itemWidth});
    $('.prev').on('click', function(e){
        e.preventDefault();
        carousel.animate({left: '+=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left) < 2) {
                carousel.css({left: -itemWidth * (carousel.children().length - 2)});
            }
        });
        return false;       
    });
    $('.next').on('click', function(e){
        e.preventDefault();
        carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        return false;       
    });
})();

so the image illustrates my aim.

enter image description here

user3520443
  • 279
  • 2
  • 12
  • http://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect check this link – codefreaK Jun 03 '14 at 11:49
  • Can you please make it more clear about to your second need – codefreaK Jun 03 '14 at 12:03
  • So the second thing is - have three links underneath the slider and each link is connected to a slide. So when you click on an link called 'link1' is slides to 'image1'. Underneath this would have text associated to each slide and that changes too when you click on the link to change the slide? – user3520443 Jun 03 '14 at 12:28
  • So like this http://jsfiddle.net/iamdanbarrett/UWbrQ/199/ – user3520443 Jun 03 '14 at 12:30
  • I have added an image to help visualise what I am trying to achieve. – user3520443 Jun 03 '14 at 12:38

4 Answers4

1

Easiest way:

Create variable var autoplay=true;,

Wrap Your function binded to next button click in setInterval, so setInterval Function would be like this one:

setInterval(function(){
    if(!autoplay)return;
    carousel.animate({left: '-=' + itemWidth}, 300, function(){
      if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
        carousel.css({left: -itemWidth});
      }
    })
},1000)

and then just add autoPlay toggle handler

$('.autoplayControl').on('click',function(){
    autoplay=!autoplay;
})

FIDDLE: http://jsfiddle.net/UWbrQ/197/

entio
  • 3,816
  • 1
  • 24
  • 39
1

Since I hadn't seen the button for autoplay I thought of automatic solution.
In This fiddle the Gallery moves with automatic movement(ten second for image) when the user clicks on pre next buttons auto move stops to restart after 10 seconds of inactivity
For me this is a more elegant solution

<script type="text/javascript">
$(document).ready(function(){
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),

        carousel = $('.carousel');
        console.log(itemWidth)
    carousel.prepend(last.clone()).append(first.clone());
    carousel.width(itemWidth * $('.item').length);
    carousel.css({left: -itemWidth});

    //auto start
    var giranews = setInterval(function(){move()},5000);
    function move(){
            carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        };

    function stopx(){
             clearInterval(giranews);
        };  

    function countdown(a) {
        var count = a;
         timerId = setInterval(function() {
            count--;
            console.log(count);
            if(count == 0) {
                clearInterval(timerId);
                giranews = setInterval(function(){move()},5000);
            };
        }, 1000);
    };

    $('.prev').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        carousel.animate({left: '+=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left) < 2) {
                carousel.css({left: -itemWidth * (carousel.children().length - 2)});
            }
        });
        return false;       
     });
    $('.next').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        return false;       
    });
})
</script>
Devima
  • 1,566
  • 2
  • 10
  • 16
  • That is a very elegant way of doing it. Is there a way to add controls for each slide under neath the slider that if you click on one of them it will take you to that particular slide and also have a caption underneath the link controls? – user3520443 Jun 03 '14 at 12:32
  • I have placed an image into my question showing what I am looking to achieve. – user3520443 Jun 03 '14 at 12:38
  • @user3520443: i've post a new answer i hope you'll like it. – Devima Jun 03 '14 at 15:49
0

The Easiest Way Demo Based On your Code with Just Addition of few Lines

Periodically Call the auto function This function is basically the content inside your click for next slide
Wrap this inside the function and call it with your required interval 

 setInterval(Auto,5000);
 function Auto(){

        carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });

 }
codefreaK
  • 3,584
  • 5
  • 34
  • 65
0

Although the aim of this community is not provide complete script to other people, but provide solutions to specific problems,
given my love for web galleries in this fiddle there is a gallery with caption below the image with buttons that move images
To accomplish this i had to change the script logic and code is increased slightly
If you like this solution don't forget to flag in green my answer ;) thanks

<script type="text/javascript">
$(document).ready(function(){
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
        countx=1,
        carousel = $('.carousel');
        console.log(carousel.position().left)
    carousel.width(itemWidth * $('.item').length);

    //auto start
    var giranews = setInterval(function(){move()},5000);
    function move(){
        var left=carousel.position().left
        if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{ carousel.animate({left: '-=' + itemWidth}, 300);}
        if(countx===4){countx=1}else{countx++}
        showCaption(countx)
        };

    function stopx(){
             clearInterval(giranews);
        };  

    function countdown(a) {
        var count = a;
         timerId = setInterval(function() {
            count--;
            console.log(count);
            if(count == 0) {
                clearInterval(timerId);
                giranews = setInterval(function(){move()},5000);
            };
        }, 1000);
    };

    //show captions in caption div
    function showCaption(countx){
        var caption=$('li:eq('+(countx-1)+')').attr('data-caption')
        $('#caption').text(caption)
        }
    showCaption(countx)

    $('.prev').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        if(countx===1){countx=4}else{countx--}
        showCaption(countx)
        var left=carousel.position().left
        if(left===0){carousel.animate({'left':(itemWidth*($('li.item').length-1)*-1)+'px'},300)}else{carousel.animate({left: '+=' + itemWidth}, 300);}
     });

    $('.next').on('click', function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        if(countx===4){countx=1}else{countx++}
        showCaption(countx)
        var left=carousel.position().left
        if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{carousel.animate({left: '-=' + itemWidth}, 300);} 

    });

    //insert buttons links to image
    for(a=0;a<$('li.item').length;a++){
        $('<a class="butt">'+(a+1)+'</a>').appendTo('div.buttons')
        }

    $('a.butt').click(function(e){
        e.preventDefault();
        stopx();
        if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
        var pos=carousel.position().left
        carousel.animate({'left': (($(this).index()*itemWidth)*-1)+'px'})
        showCaption($(this).index()+1)
        countx=$(this).index()+1
        })

})
</script>
Devima
  • 1,566
  • 2
  • 10
  • 16