シームレスな横スライドショー
'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; }
(View1920)