mgn-conveyor
Implement function to slide images or elements in an infinite loop.
https://github.com/frontend-isobar-jp/mgn-conveyor
Default
let conveyor = new mgnConveyor(".j-conveyor");
let btn = document.getElementById('btn');
btn.onclick = () => {
conveyor.flag ? conveyor.Stop() : conveyor.Start();
}
<ul class="j-conveyor">
<li><img src="images/img.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
</ul>
<button id="btn">stop / start</button>
.j-conveyor li { display: table-cell; }
.j-conveyor li img { height: 600px; width: auto; max-width: inherit; }
@media only screen and (max-width: 768px) {
.j-conveyor li img { height: 450px; width: auto; }
}
@media only screen and (max-width: 640px) {
.j-conveyor li img { height: 300px; width: auto; }
}
Option
new mgnConveyor(
".j-conveyor2",
{
speed: 100
}
);