<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body,
html {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#wrapper {
z-index: 1000;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: fixed;
height: 100%;
width: 100%;
}
.box {
position: fixed;
display: flex;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box">
<div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);">
<ul>
<li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
</ul>
</div>
<div class="loop_js2" id="loop_js2" style="transform: translate(0%,10%);">
<ul>
<li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
<li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$(function () {
const loop = document.getElementById('loop_js');
const loopAnim = new TimelineMax({
repeat: -1
});
let loopItem = (window.innerWidth, loop.children[0]);
loop.appendChild(loopItem.cloneNode(true));
loop.appendChild(loopItem.cloneNode(true));
loop.appendChild(loopItem.cloneNode(true));
loopAnim
.to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
.to(loop, 0, { ease: Power0.easeNone, y: 0 });
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
e.preventDefault();
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if (delta < 0){
loopAnim.time(loopAnim.time()+1);
} else {
loopAnim.time(loopAnim.time()-1);
}
});
});
$(function () {
const loop = document.getElementById('loop_js2');
const loopAnim = new TimelineMax({
repeat: -1
});
let loopItem = (window.innerWidth, loop.children[0]);
loop.appendChild(loopItem.cloneNode(true));
loop.appendChild(loopItem.cloneNode(true));
loop.appendChild(loopItem.cloneNode(true));
loopAnim
.to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
.to(loop, 0, { ease: Power0.easeNone, y: 0 });
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
e.preventDefault();
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if (delta < 0){
loopAnim.time(loopAnim.time()+1);
} else {
loopAnim.time(loopAnim.time()-1);
}
});
});
</script>
</body>
</html>
i make vertical infinite loop slider.
On the left side, i made it but i want to make slider that phote is coming up from below like right side.
And then on the left side, it's infinite but on the right side the infinite loop stop on the way.
so i want to make vertical infinite loop slider from below like left slider's loop.
please help me
