Простейший слайдер

by Евгений

HTML

<div class="wrap">
  <div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
    <div class="child child3"></div>
  </div>
</div>

CSS

.wrap {
    overflow: hidden;
    width: 400px;
    height: 200px;
    position: relative;
  }

  .parent {
    width: 1200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .child {
    width: 400px;
    height: 200px;
    float: left;
    background-position: center;
    background-size: content;
    background-repeat: norepeat;
  }

  .child1 {
    background-image: url(https://picsum.photos/400/200);
  }
  .child2 {
    background-image: url(https://www.stevensegallery.com/400/200);
  }
  .child3 {
    background-image: url(https://placebear.com/400/200);
  }

JavaScript

$(function () {
    function go() {
        $('.parent').delay(3000).animate({
            left: '-=400'
        }, 500, function () {
            $('.child:first').appendTo($(this))
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
})