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