Flex容器图像滑块轮播

Question

I am trying to make an image carousel with a flex container. I want the carousel to slide the images when certain time passes. The first iteration is okay but when the second one comes, it does nothing.

I do not want to use a third party carousel. Thanks for your answers

$(document).ready( function() {

var carouselWidth = $('.rm-carousel-item').width();

var carIndex = 0;
var playCarousel = setInterval(function(){ autoPlayCarousel(carIndex) }, 3000);

function autoPlayCarousel(index){
    var items = $('.racmma-carousel').children();

    for (var i = 0; i < items.length; i++){
        console.log(i);
        var item = items.get(i);
        $(item).css({'transform' : 'translate(' + -carouselWidth +'px, ' + 0 + 'px)'});
    }
    carIndex += 1;
    //if ( carIndex > items.length) { carIndex = 0; }
}
});

This is the fiddle of what I am getting :

https://jsfiddle.net/j565rdk8/3/

Answer 1

You are almost good, you simply need to increase the translation on each iteration as actually your are always changing the same value. You need to do something like this :

'transform': 'translate(' + -(index * carouselWidth) + 'px, ' + 0 + 'px)'

The translaion become bigger on each iteration as the index is incrementing :

 $(document).ready(function() { var carouselWidth = $('.rm-carousel-item').width(); var carIndex = 0; var playCarousel = setInterval(function() { autoPlayCarousel(carIndex) }, 1000); function autoPlayCarousel(index) { var items = $('.racmma-carousel').children(); for (var i = 0; i < items.length; i++) { var item = items.get(i); $(item).css({ 'transform': 'translate(' + -(index * carouselWidth) + 'px, ' + 0 + 'px)' }); } carIndex += 1; if (carIndex == items.length) { carIndex = 0; } } }); 

 .racmma-carousel { height: 100%; max-width: 10000%; display: -moz-flex; display: -webkit-flex; display: flex; flex-flow: row; justify-content: space-between; overflow: hidden; } .rm-carousel-item { flex-shrink: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; transition: 0.6s all ease-in-out; min-height: 200px; } #carousel-item-1 { background-image: url(/bd/media/hero.jpg); background-color: blue; } #carousel-item-2 { background-image: url(/bd/media/hero2.jpg); background-color: red; } #carousel-item-3 { background-image: url(/bd/media/hero3.jpg); background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="racmma-carousel"> <div class="rm-carousel-item" id="carousel-item-1"> </div> <div class="rm-carousel-item" id="carousel-item-2"> </div> <div class="rm-carousel-item" id="carousel-item-3"> </div> </div>