Seamless scrolling carousel

That is to achieve seamless scrolling, but also have the function of ordinary carousel.

The principle of seamless scrolling:

First declare that the picture slides to the left;

1. HTML, at the beginning we need to add the last image we need to display before the first image in the carousel container, and also add the first image we need to display after the last image;

2. CSS, we need to display the first image at the beginning, so we need to set the CSS style of the starting position value of the image container {left:-544px}

3. JavaScript, we monitor the value _left of the left side of the image container relative to the position of the carousel component in real time. If _left is greater than the width of the image container minus the width of an image, that is the moment when the last image is slid (Of course, it is the first picture we added in advance, the first picture we want to display), and the first picture we really want to display is displayed immediately.

HTML code:

<body>
   <div class="banner-slider">
      <div class="slider-wrap">
        <img src="images/3.jpg" alt="">
        <img src="images/0.jpg" alt="">
        <img src="images/1.jpeg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/0.jpg" alt="">
      </div>
      <div class="slider-switch">
        <div class="slider-switch-prev">
          <span><</span>
        </div>
        <div class="slider-switch-next">
          <span>></span>
        </div>
      </div>
      <div class="slider-control">
        <span class="slider-control-item item-active"></span>
        <span class="slider-control-item"></span>
        <span class="slider-control-item"></span>
        <span class="slider-control-item"></span>
      </div>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
</body>

CSS code:

.banner-slider {
  width:544px;
  height: 414px;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
}

.banner-slider .slider-wrap {
  position: absolute;
  top: 0;
  left: -544px;
  width: 3264px;
  height: 414px;
}
.banner-slider .slider-wrap>img{
  display: block;
  float: left;
  width: 544px;
  height: 414px;
}

.banner-slider .slider-switch {
  height: 40px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
}

.banner-slider .slider-switch>div {
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,.2);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  position: absolute;
}

.banner-slider .slider-switch .slider-switch-prev{
  left: 0;
  top: 0;
}

.banner-slider .slider-switch .slider-switch-next{
  right: 0;
  top: 0;
}

.banner-slider .slider-control {
  position: absolute;
  width: 100%;
  bottom: 30px;
  left: 0;
  text-align: center;
}

.banner-slider .slider-control>span{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px #000;
  margin-right: 15px;
  background-color: rgba(255,255,255,.5);
}

.banner-slider .slider-control .item-active {
  background-color: rgba(37,237,237,.8);
  box-shadow: 0 0 7px #000;
}

JS code:

$(function(){
  var slider = $('.banner-slider'); //Carousel component
  var wrap = $('.slider-wrap'); //image container
  var images = wrap.children(); //all images
  var imgWidth = images.eq(0).width(); //The width of the image
  var prevBtn = $('.slider-switch-prev'); //prev button
  var nextBtn = $('.slider-switch-next'); //Next page button
  var controls = $('.slider-control>span'); //All small buttons that control progress
  var index = 0; //The currently displayed picture, the first one is 0
  var speed = 20; // time interval for seamless scrolling
  var step = 2; //The step size of seamless scrolling, the distance traveled every time it consumes speed milliseconds
  var autoEnable = true; // switch to control auto scroll

//Click the progress button

controls.on('click', function(){ index = $(this).index(); getStep(index) });

//click next button

nextBtn.on('click', function() { index++; if (index === images.length - 2) { //because we added two auxiliary images index = 0; } getStep(index); }) ; //Click the previous button prevBtn.on('click', function() { index--; if (index === -1) { index = 3; } getStep(index); }); //display The method of the current image, index {param, Number} The index 0 of the current image is the first function getStep(index){ wrap.css('left', imgWidth * (index + 1) * -1); controls.removeClass( 'item-active').eq(index).addClass('item-active'); //Update the style of the progress button _left = -(index+1) * imgWidth; //Click the button to update the automatic rotation The starting position} //The absolute position of the image container relative to the carousel component var _left = wrap.offset().left; //The timer for seamless scrolling var timer = setInterval(function(){ if ( autoEnable) { if (-_left > wrap.width()-imgWidth) { _left = -imgWidth; } _left -= step; index = Math.floor(-_left/imgWidth)-1; controls.removeClass('item-active ').eq(index).addClass('item-active'); wrap.css('left', _left); } }, speed); //Mouse in and turn off automatic sliding slider.on('mouseover', function() { autoEnable = false; }); //Mouse out and turn on automatic sliding slider. on('mouseleave', function() { autoEnable = true; });})

Seamless scrolling carousel

Guess you like