Javascript

シームレスな横スライドショー

'20.09.24

スライドショー設置位置に以下のコードを記載

<div class="slider p-0">
  <div class="slider_loop slider pb-0">
    <ul class="slider_loop_inner">
      <li><img src="http://placehold.jp/360x180.png?text={イメージ}" alt="イメージ画像" width="900" height="720" class=""></li>
      <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
      <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
      <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
    </ul>
  </div>
</div>

 

Javascript

document.addEventListener('DOMContentLoaded', function() {
  // Load Event
  $(window).load(function() {
    loopSetUp();
    loop();
  })

  // Resize Event
  var resizetimer = false;
  $(window).resize(function() {
    if (resizetimer !== false) {
      clearTimeout(resizetimer);
    }
    resizetimer = setTimeout(function() {
      loopSetUp();
    }, 200);
  });
  var windowWidth = 0;
  var imageWidth = 320;
  var $clone = $('.slider_loop_inner li').clone(true);
  $('.slider_loop_inner')
    .append($clone);

  // loop
  function loopSetUp() {
    windowWidth = $(window).width();
    switch (true) {
      case (windowWidth > 768):
        imageWidth = 450;
        break;
      case (windowWidth > 400):
        imageWidth = 300;
        break;
      default:
        imageWidth = 200;

    }
    $('.slider_loop_inner li').css('width', imageWidth + 'px');
    $('.slider_loop_inner').css('width', function() {
      return (imageWidth * $('.slider_loop_inner li').length) + 'px';
    });
  }

  function loop() {
    setTimeout(function() {
      $('.slider_loop_inner').css('left', $('.slider_loop_inner').position().left - 1);
      if ($('.slider_loop_inner').position().left < -imageWidth * $('.slider_loop_inner li').length / 2) {
        $('.slider_loop_inner').css('left', function() {
          return 0;
        });
      }
      loop();
    }, (1000 / 30))
  }
})

 

CSS

.slider_loop {
 position: relative;
 overflow: hidden;
}

.slider_loop .slider_loop_inner {
 position: relative;
 left: 0;
 top: 0;
 margin: 0;
 padding: 0;
 list-style: none;
}

.slider_loop .slider_loop_inner li {
 float: left;
}

 

(View1911)