CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 1466

How to make Image Carousel Controls 'next' and 'previous'

I'm making an image carousel

see my fiddle : https://jsfiddle.net/gd2n6paw/8/

i'm new to jquery and just wanted to know that how can we make carousel 'next' and 'prev' controls thanks for the help .

you can see my code here also :

my html

<div class="slider">
 <div class="container" id="img-slider">
 </div>
</div>
<button onclick="prev()">
 prev
</button>
<button onclick="next()">
 next
</button>

my css

.slider{

min-height:300px;
max-width:400px;
border:1px solid #000;`

}
.container{
background-image:url('http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg');
min-height:300px;
max-width:400px;
}

my jQuery

  (function(){

// main image carousel index.html you can customize it ...

var imgSlider = $('#img-slider');
var counter = 0;
var imgSliderContainer = ['http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg','http://www.pycomall.com/images/P1/Natural_Background.jpg','http://www.gochecks.net/data/media/91/Mobile_Nature_Wallpapers_35.jpg'];


function ImageSliderHome(){ 

    imgSlider.fadeOut('5000' ,function(){
        imgSlider.css('background-image', "url('" + imgSliderContainer[counter] + "')");
    }).fadeIn('5000');

    counter++;

    if(counter >= imgSliderContainer.length){
        counter = 0;
    }
}

function prev(){
     ?   
}
 function next(){
     ?
 }

setInterval(ImageSliderHome,3000);

})();

Upvotes: 0

Views: 882

Answers (1)

Chris
Chris

Reputation: 997

What about this?

https://jsfiddle.net/gd2n6paw/12/

$('#next').click(function(){
    counter++;
    ImageSliderHome();        
});

$('#prev').click(function(){
    if(counter == 0)
        counter = imgSliderContainer.length;
    else
        counter--;
    ImageSliderHome();
});

Upvotes: 1

Related Questions