When you hover over the squares of the picture change one after another using the interval function. Can't solve 2 problems.
1. The function should be started only at the square on which the point.
2. The function should stop if the cursor has left the square.
Help me think.
$('.block').hover(function(){
setInterval(myFuncSuper2, 3000);
});
// Change pic on hover
function changePic(i) {
setTimeout(function () {
jQuery(".hero-cat_" + i).addClass("active");
jQuery(".hero-cat_" + i).siblings().removeClass("active")
}, i * 1000)
}
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
changePic(i);
}
}
.block {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
cursor: pointer;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
display: none;
}
.block img.active {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
What you are trying to achieve needs two things:
mouseenter and mouseleave
1.2. because mousehover will keep on adding events when you keep hovering. you need to stop that.
And this for context of current element
2.1 because you need to enable only selected element for hover, not entire .block set
$('.block').mouseenter(startMyFunc);
$('.block').mouseleave(stopMyFunc);
var myInterval;
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
setTimeout(function() {
jQuery(this).find(".hero-cat_" + i).addClass("active");
jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
}.bind(this), i * 300)
}
}
function startMyFunc() {
myInterval = window.setInterval(myFuncSuper2.bind(this), 1000)
}
function stopMyFunc() {
if (myInterval) {
clearInterval(myInterval);
}
}
.block {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
cursor: pointer;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
display: none;
}
.block img.active {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
<img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
<img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
<img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
-- Edit: added clearing the timeouts created in myFuncSuper2 ---
Set the function for hover off, and clear the interval
var interval = null;
var timeouts = [0,0,0];
$('.hero-category').hover(function () {
interval = setInterval(myFuncSuper2, 3000)
}, function() {
if (interval) clearInterval(interval);
for (var i = 0; i < timeouts.length; i++) {
if (timeouts[i] !== 0) {
clearTimeout(timeouts[i]);
}
}
});
function myFuncSuper2() {
for (let i = 0; i <= 3; i++) {
timeouts[i] = setTimeout(function() {
jQuery(this).find(".hero-cat_" + i).addClass("active");
jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
}.bind(this), i * 300)
}
}
Related
I've been studying hard about auto slideshow, my problem is when i clicked at bullet for it to shows next image, the image suddenly disappear.
At first i thought because i used addEventListener event that's why it didn't work, then i changed to use "click" event which is jquery, the result it's still the same.
I now really have no idea what to do next, i would like to hear some advices from professional or web developer, please! i would very appreciate it.
var toggleMenu = $(document).ready(function () {
$("#maintopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#subtopics").toggle("fast");
});
$("html").click(function() {
if ($("#subtopics").is(':visible')) {
$("#subtopics").toggle();
}
});
});
// slideshow
var slideShow = $(document).ready(function () {
var slideImages = document.getElementsByClassName("slide");
var bulletImages = document.getElementsByClassName("bullets");
var index = 0;
function hideImages() {
for (var i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
$(bulletImages[i]).removeClass("clicked");
}
}
function initiaImage() {
for (var i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
$(bulletImages[index]).addClass("clicked");
}
}
function slidingImages() {
hideImages();
if (index < slideImages.length - 1)
index++;
else {
index = 0;
}
slideImages[index].style.display = 'block';
$(bulletImages[index]).addClass("clicked");
}
function autoSlide() {
setInterval(function () {
slidingImages();
}, 2000);
}
function arrowSlide() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
$(prev).click(function () {
hideImages();
if (index === 0) {
index = slideImages.length;
}
slideImages[index - 1].style.display = 'block';
index--;
$(bulletImages[index]).addClass("clicked");
});
$(next).click(function () {
hideImages();
if (index === slideImages.length - 1) {
index = -1;
}
slideImages[index + 1].style.display = 'block';
index++;
$(bulletImages[index]).addClass("clicked");
});
}
function bulletSlide() {
for (var i = 0; i < bulletImages.length; i++) {
$(bulletImages).click(function () {
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
}
}
return {
hideImages: hideImages(),
initiaImage: initiaImage(),
autoSlide: autoSlide(),
arrowSlide: arrowSlide(),
bulletSlide: bulletSlide()
}
});
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
.arrow {
position: absolute;
cursor: pointer;
width: auto;
padding: 15px;
top: 50%;
font-size: 50px;
color: white;
border-radius: 0 10px 10px 0;
transition: 0.5s ease;
transform: translate3d(0,-50%,0);
}
#prev {
left: 0px;
max-width: 100%;
}
#next {
right: 0px;
max-width: 100%;
border-radius: 10px 0px 0px 10px;
}
#previous:hover, #next:hover {
background-color: rgba(0,0,0,0.8);
}
#slidebullets {
position: relative;
text-align: center;
top: -30px;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.clicked {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontent">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontent">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontent">SlideImage3</span>
</div>
<div id="prev" class="arrow">❮</div>
<div id="next" class="arrow">❯</div>
</div>
<div id="slidebullets">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<script src="jquery.js"></script>
<script src="index2.js"></script>
</body>
</html>
https://jsfiddle.net/b9asqxc5/1/
Getting the value of i in a wrong way, alert i to see its value:
function bulletSlide() {
for (var i = 0; i < bulletImages.length; i++) {
$(bulletImages).click(function () {
alert(i); // i = 3
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
}
}
Please revise as below:
function bulletSlide() {
$(bulletImages).click(function () {
hideImages();
slideImages[$(this).index()].style.display = 'block';
index = $(this).index();
});
}
Vanilla JS version:
function bulletSlide() {
[].forEach.call(bulletImages, function(bimg,i,a) {
bimg.addEventListener('click', function () {
hideImages();
slideImages[i].style.display = 'block';
index = i;
});
});
}
I wanted to combine this function of showing a picture (our logo) on my Shopify frontage website fullscreen and make it fade away or vanish after seconds automatically so people can access to the website after the Image or our logo is gone (2 Sec).
Now I have these two parts of HTML, but they don't work together somehow.
Can someone help?
Thank you
<div id="makethisvanish"><img src="image"></div>
<div class="fixed-background">
<img src="image" class="myimg">
</div>
<script type="text/javascript">
window.onload = function () {
window.setTimeout( vanishText, 2000 ); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById( 'makethisvanish' ).style.visibility = 'hidden';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
Try the code below:
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
.fixed-background {
position: relative;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
.grid__item {
height: 50px;
}
.myimg {
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
<div class="grid__item">
<div class="fixed-background">
<img src="http://i65.tinypic.com/5nn1va.jpg" class="myimg">
</div>
</div>
</body>
I believe this should do?
Report back if you have a problem. I'll try to help you solve it ;)
EDIT
For only the full-screen picture you'll need even less:
<head>
<script>
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
}
</script>
<style>
#makethisvanish {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#makethisvanish img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="makethisvanish">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
</body>
Maybe you'll need another line in vanishText():
document.getElementById('makethisvanish').style.zIndex = "0";
But try with the code above first.
EDIT_2
replace the script in the head with the following:
window.onload = function () {
window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}
var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
screensaver();
}
}
function vanishText() {
document.getElementById('makethisvanish').style.opacity = '0';
document.getElementById('makethisvanish').style.zIndex = '-1';
}
function screensaver() {
document.getElementById('makethisvanish').style.zIndex = "1000";
document.getElementById('makethisvanish').style.opacity = "1";
}
function resetTimer() {
if(_idleSecondsCounter >= IDLE_TIMEOUT) {
vanishText();
}
_idleSecondsCounter = 0;
}
document.onclick = function() {
resetTimer();
};
document.onmousemove = function() {
resetTimer();
};
document.onkeypress = function() {
resetTimer();
};
You'll probably have to adapt the IDLE_TIMEOUT. It's set to 5 seconds for testing. I would probably set it to one minute, maybe a bit more. The "screensaver" should dissappear if the mouse is moved, a mouseclick is done or a key on the keyboard is pressed.
I'm stuck with a crossfade. My images fade into black, but I have no idea how to rework this to have crossfade.
var backgroundClasses = ['bg1', 'bg2']; // Store all the background classes defined in your css in an array
var $element = $('.container'); // cache the element we're going to work with
var counter = 0; // this variable will keep increasing to alter classes
setInterval(function() { // an interval
counter++; // increase the counter
$element.fadeOut(500, function() { // fade out the element
$element.removeClass(backgroundClasses.join(' ')). // remove all the classes defined in the array
addClass(backgroundClasses[counter % backgroundClasses.length]). // add a class from the classes array
fadeIn(500); // show the element
});
}, 3000)
.container {
width: 100vw;
height: 100vh;
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: green;
}
This could be better achieved with CSS.
$(document).ready( function()
{
var counter = 1;
setInterval( function()
{
// current
var current = '.bg' + counter % $('.bg').length;
counter++;
var next = '.bg' + counter % $('.bg').length;
$( current ).addClass('bg-fadeout');
$( next ).removeClass('bg-fadeout');
}, 1000);
})
.bgs {
position: relative;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
opacity: 1;
transition: opacity 0.3s linear;
}
.bg-fadeout {
opacity: 0;
}
.bg1, .bg3 {
background-color: red;
}
.bg4, .bg2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bgs">
<div class="bg bg4"></div>
<div class="bg bg3"></div>
<div class="bg bg2"></div>
<div class="bg bg1"></div>
<div>
I'm trying to make a simple slider with 3 images and 3 bullets. My problem is that when I use jquery .animate to go to the next bullet, the first time it works correctly but the second time shows me in the first position with delay, which makes jquery .animate be delayed in other bullets.
My code in JSFiddle https://jsfiddle.net/Lqpj7sx1/
My code in StackOverflow snippet:
$(document).ready(function(){
//Encuentro la cantidad de imagenes
var cantImagenes = $('#imagenes img').length;
//Genero los bullets de acuerdo a la cantidad de imagenes
for(var i = 0; i < cantImagenes; i++)
{
$("#bullets").append("<span class='bullet' id=" + i + "></span>");
$('#bullets #0').addClass("seleccion");
var cantBullet = $("span.bullet").length;
}
var currentBullet = 0;
function animacion(){
$("#texto3").slideDown(4000, function(){
$("#texto3").css("display", "none")
$("#texto2").slideDown(4000, function(){
$("#texto2").css("display", "none")
$("#texto1").slideDown(4000, function(){
$("#texto1").css("display", "none")
})})});
for(i = 0; i < cantBullet; i++)
{
$("#bullets").animate({"left": "+=600px"}, 4000, function(){
$("#bullets #"+currentBullet).removeClass("seleccion");
currentBullet = currentBullet + 1;
$("#bullets #"+currentBullet).addClass("seleccion");
if(currentBullet > cantBullet){
currentBullet = 0;
$("#bullets #"+currentBullet).addClass("seleccion");
}
});
}
$("#foto3").animate({"left": "+=600px"}, 4000, function(){
$("#foto2").animate({"left": "+=600px"}, 4000, function(){
$("#foto1").animate({"left": "+=600px"}, 4000, function(){
$("#foto3").css("left", "0")
$("#foto2").css("left", "0")
$("#foto1").css("left", "0")
animacion();
})})});
}
animacion();
});
#imagenes{
width: 600px;
height: 450px;
border: 1px solid grey;
position: relative;
overflow: hidden;
background-image: url(http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg)
}
#foto1, #foto2, #foto3{
display: block;
position: absolute;
}
#texto1, #texto2, #texto3{
display: none;
position: absolute;
text-align: center;
width: 600px;
height: 30px;
padding-top: 10px;
vertical-align: bottom;
background-color: #000000;
color: #FFFFFF;
opacity: 0.3;
filter: alpha(opacity=30);
}
.bullet
{
width: 20px;
height: 20px;
border:3px solid #000;
margin-right: 10px;
display: inline-block;
}
.seleccion
{
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h2>Slider</h2>
<div id="imagenes">
<img src="https://www.koi-nya.net/img/subidos_posts/2016/08/PS4-Slim_08-21-16_006-600x450.jpg" id="foto1" />
<img src="https://www.euroresidentes.com/estilo-de-vida/moda-estilo/wp-content/uploads/sites/15/2014/09/collage-leggings.jpg" id="foto2" />
<img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg" id="foto3" />
<div id="texto1">Picture 1</div>
<div id="texto2">Picture 2</div>
<div id="texto3">Picture 3</div>
</div>
<div id="bullets"></div>
My problem is specifically in these lines:
for(i = 0; i < cantBullet; i++)
{
$("#bullets").animate({"left": "+=600px"}, 4000, function(){
$("#bullets #"+currentBullet).removeClass("seleccion");
currentBullet = currentBullet + 1;
$("#bullets #"+currentBullet).addClass("seleccion");
if(currentBullet > cantBullet){
currentBullet = 0;
$("#bullets #"+currentBullet).addClass("seleccion");
}
});
}
I hope someone can help me! Thank you!
Check this [https://jsfiddle.net/8hoo7tc9/]
Actually for loop was not properly set
[1]: https://jsfiddle.net/8hoo7tc9/
Hi i'm creating a jquery slider and i'm having problems to restar the slider when the time(in the setInterval) is over. When the 3 images slide and the last one is showing the animation stays there, but i want to restart to the first image and start the loop again. Could someone help me?
Thanks!
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slider Jquery Test</title>
<link href="slider.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div id="container">
<ul id="buttons" class="buttons">
<li><img id="left_b" class="left_b" src="imagens/flechae.png" alt="Anterior" onMouseOver="this.src='imagens/flechaehover.png'" onMouseOut="this.src='imagens/flechae.png'"></li>
<li><img id="right_b" class="right_b" src="imagens/flechad.png" alt="Proximo" onMouseOver="this.src='imagens/flechadhover.png'" onMouseOut="this.src='imagens/flechad.png'"></li>
</ul>
<ul id="gallery" class="gallery">
<li><img id="1" class="images" src="imagens/imagem1.jpg" alt="Imagem 1"></li>
<li><img id="2" class="images" src="imagens/imagem2.jpg" alt="Imagem 2"></li>
<li><img id="3" class="images" src="imagens/imagem3.jpg" alt="Imagem 3"></li>
</ul>
</div>
</body>
</html>
CSS
#charset "utf-8";
body{
width: 100%;
height: auto;
}
#container {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/*overflow: hidden;*/
}
.buttons {
width: 100%;
height: auto;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
display: none;
}
.buttons li {
width: 100%;
height: auto;
position: relative;
margin: 0;
padding: 0;
}
.left_b {
width: 20px;
height: 80px;
position: relative;
float: left;
margin-left: 30px;
margin-top: 250px;
}
.right_b {
width: 20px;
height: 80px;
position: relative;
float: right;
margin-right: 30px;
margin-top: 250px;
}
.gallery {
width: 100%;
height: auto;
list-style: none;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.gallery li {
width: auto;
height: auto;
position: relative;
float: left;
}
.images {
width: 1200px;
height: 720px;
position: relative;
float: left;
}
JavaScript
$(function(){
slide();
// Slider
function slide()
{
// Variables
var interval = 0;
var time = 3000;
var seconds = 1000;
var current_image = 1;
var num_images = 0;
var total_width = 0;
var slide_left = "+=1200px";
var slide_right = "-=1200px";
var right_b = $(".right_b");
var left_b = $(".left_b");
var left = "margin-left";
var width = "width";
var gallery = $(".gallery");
var galleryLi = $(".gallery li");
var images = $(".images");
var buttons_class = $(".buttons");
var container = $("#container");
// Calling functions
imagesSize();
hideButtons();
animation();
// Functions
function animation()
{
if(current_image < num_images)
{
loop();
clickRight();
clickLeft();
}
}
function hideButtons()
{
container.hover(function(){
buttons_class.fadeIn();
}, function(){
buttons_class.fadeOut();
});
}
function imagesSize()
{
galleryLi.each(function(){
num_images++;
total_width += 1200;
});
gallery.css(width, total_width + "px");
}
function loop()
{
if(current_image >= 1){
interval = setInterval(moveLeft, time);
}
else if(current_image === num_images){
clearLoop();
moveLeft();
}
}
function clearLoop()
{
clearInterval(interval);
}
function moveLeft()
{
if(current_image < num_images){
gallery.animate({left: slide_right}, seconds);
current_image++;
}
}
function clickRight()
{
right_b.click(function(){
moveLeft();
clearLoop();
loop();
});
}
function moveRight()
{
if(current_image > 1){
gallery.animate({"margin-left": slide_left}, seconds);
current_image--;
}
}
function clickLeft()
{
left_b.click(function(){
moveRight();
clearLoop();
loop();
});
}
} // end of function slide
}); // End of main function
function loop()
{
if(current_image >= 1){
interval = setInterval(moveLeft, time);
}
else if(current_image === num_images){
clearLoop(); // Clear the previous interval
moveLeft();
// Add these two lines after setTimeout to finish the animation.
setTimeout(function(){
current_image = 1;
loop();
}, seconds);
}
}