Search code examples
javascripthtmlcssslideshowtransition

Trying to make my photo slideshow continually loop through all photos

My website has photo slideshow in one of its sections below the header. When the slideshow gets to the third photo it stops. I want to know how to make the third photo transition back to the first photo and then continue on in that loop using the same animation in all photos? The animation is the next photo sliding in from the right over the current photo. My code is below.

HTML
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <style>
        body {
            margin: 0;
        }

        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }

        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }

        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }

        .photoSection {
            position: relative;
            background-color: black;
            overflow: hidden;
        }

        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.8s;
        }
    </style>
</head>

<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Some Title</h1></a>
        <style>
            a{text-decoration: none}
        </style>

    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>
    <div class="photoSection">
        <img class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
        <img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
        <img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
    </div>

<div class="section1" style = "background-color: black; color: white; padding-top: 150px;" >
    <a class = "header1" style="padding-left: 200px; display:inline-block; width:85.2%">
        <img src = "FoldingIcon.PNG">
        <h1 style = "font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
        <p style = "margin-bottom: 200px; font-family: Verdana; color: gray;">
        </p>
        <img src="Backpack.PNG">
        <h2 style = "font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
        <p style = "margin-bottom: 300px"></p>
    </a>
    <p style = "color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
        ____________________________________________________________________________________________________________________________________________________________</p>
</div>

<div class = "section2" style = "background-color: black; color: white; padding-bottom: 500px;">

</div>
<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        myIndex++;
        if (myIndex > x.length) {
            myIndex = 1
            x[myIndex - 1].style.right;
        }
        else {
            x[myIndex - 1].style.left = "0";
        }

        // you may want to add transition-delay , z-index, ... to tune sliding effect
        setTimeout(carousel, 4000); // Change image every 2 seconds
    }
</script>
Solution

  • Add a css class named .no_trans which will disable the transition. This class will have the following rule

    .no_trans{
  transition:none !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
}

  • When the counter is greater than the no. of images you disable remove the transition class and reverse the position of the images (which will be quick)
  • the counter then starts with a no. less than the no. of elements since you reset it to 0
  • the process restarts

    .no_trans {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}
    HTML
<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
  <style>
    body {
      margin: 0;
    }
    
    .Header {
      position: fixed;
      z-index: 1;
      width: 100%;
      height: 70px;
      background-color: black;
      text-align: right;
    }
    
    .socialmedia {
      position: fixed;
      right: 100px;
      top: 35px;
      transform: translate(0, -50%);
      display: flex;
      /* add this */
      align-items: center;
      /* add this */
    }
    
    .preorder button {
      background-color: white;
      border: 0;
      height: 35px;
      width: 110px;
      margin-left: 35px;
    }
    
    .footer {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90px;
      background-color: black;
    }
    
    .photoSection {
      position: relative;
      background-color: black;
      overflow: hidden;
    }
    
    .mySlides~.mySlides {
      position: absolute;
      top: 0;
      left: 100%;
      transition: 0.8s;
    }
  </style>
</head>

<body>

  <div class="Header" id="myHeader">
    <a class="headerLogo">
      <a href="file:///C:/Noah's%20stuff/Home.html">
        <h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Some Title</h1>
      </a>
      <style>
        a {
          text-decoration: none
        }
      </style>

    </a>
    <div class="socialmedia">
      <a class="Facebook">
        <a href="https://www.facebook.com/" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
      </a>
      <a class="Instagram">
        <a href="https://www.instagram.com/"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
      </a>
      <a class="Youtube">
        <a href="https://www.youtube.com/channel/" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
      </a>
      <a class=p reorder>
        <button style="background-color: white;">Pre-Order</button>

      </a>
    </div>
  </div>
  <div class="photoSection">
    <img class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
    <img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
    <img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
  </div>

  <div class="section1" style="background-color: black; color: white; padding-top: 150px;">
    <a class="header1" style="padding-left: 200px; display:inline-block; width:85.2%">
      <img src="FoldingIcon.PNG">
      <h1 style="font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
      <p style="margin-bottom: 200px; font-family: Verdana; color: gray;">
      </p>
      <img src="Backpack.PNG">
      <h2 style="font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
      <p style="margin-bottom: 300px"></p>
    </a>
    <p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
      ____________________________________________________________________________________________________________________________________________________________</p>
  </div>

  <div class="section2" style="background-color: black; color: white; padding-bottom: 500px;">

  </div>
  <script>
    var myIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      myIndex++;
      //console.log(myIndex);
      if (myIndex > x.length) {
        for (var y = 0; y < x.length; ++y) {
          x[y].classList.add("no_trans");
          x[y].style.left = "100%";
          myIndex = 0;
        }
      } else {
        x[myIndex - 1].classList.remove("no_trans");
        x[myIndex - 1].style.left = "0";
      }

      // you may want to add transition-delay , z-index, ... to tune sliding effect
      setTimeout(carousel, 4000); // Change image every 2 seconds
    }
  </script>