Create a Custom Slider Using HTML JS/CSS in a Funnel Builder

Created by Megan Chatty, Modified on Wed, 14 Jun, 2023 at 5:18 AM by Megan Chatty

In this video, you will learn how to add a simple image slider to your funnel.

Things to do:

*You need to use the HTML JS Code Editor.

*Kindly save your images in your media library, and copy the link.

*Update the Custom CSS through Settings.

*Play around with the timer.

*Don't forget to hit save and then preview.

HTML JS Code Editor Code - Copy and Paste!

<div class="container">
  <div id="proparallax">
    <img class="one" src="https://storage.googleapis.com/msgsndr/WbWREiI7ab86y5oj1HDm/media/6488afa9ec51250b8fdc2b62.jpeg"> 
    <img class="two" src="https://storage.googleapis.com/msgsndr/WbWREiI7ab86y5oj1HDm/media/6488afa9ec51250cd5dc2b63.jpeg">
    <img class="three" src="https://storage.googleapis.com/msgsndr/WbWREiI7ab86y5oj1HDm/media/6488afa9ec5125fa45dc2b61.jpeg">
  </div>
</div>

Custom CSS Code - Copy and Paste!

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
    min-height: 45rem;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    background-color: whitesmoke;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px
}
/* Basic appearance stuff ends here */

/* Parallax Horizontal Scroller - by Bree Dulmage, 2020 */
#proparallax {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 37.5rem;
    border: 10px solid black;
    box-shadow: 0px 8px 10px 8px grey;
}

#proparallax img {
    position: absolute;
    width: 50rem;
    height: 37.5rem;
    overflow: hidden;
    object-fit: cover;
}

@keyframes parallax_one {
 /* controls img.one movement */
    0% {
 /* .imageloaded */
        height: 37.5rem;
        width: 50rem;
        left: 0rem;
        opacity: 1;
    }
  /* .imagehold runs from 0 to 27.77% */
    27.77% {
 /* .imageloaded */
        width: 50rem;
        left: 0rem;
    }

    27.78% {
 /* .imagepreunload */
        width: 50rem;
        left: 0rem;
        right: 50rem;
    }

    33.33% {
 /* .imageunloaded */
        height: 37.5rem;
        width: 0rem;
        left: 0rem;
        right: 0rem;
        opacity: 1;
    }

    33.34% {
 /* imageoff */
        opacity: 0;
    }

    94.43% {
 /* .imageon */
        left: 0rem;
        opacity: 0;
    }

    94.44% {
 /* .imageinitial */
        height: 37.5rem;
        width: 0rem;
        left: 50rem;
        opacity: 1;
    }

    100% {
 /* .imageloaded */
        width: 50rem;
        left: 0rem;
        opacity: 1;
    }
}

@keyframes parallax_two {
 /* controls img.two movement */
    0% {
 /* .imageoff */
        opacity: 0;
    }

    27.77% {
 /* .imageon */
        left: 0rem;
        opacity: 0;
    }

    27.78% {
 /* .imageinitial */
        width: 0rem;
        height: 37.5rem;
        left: 50rem;
        opacity: 1;
    }

    33.33% {
 /* .imageloaded */
        width: 50rem;
        left: 0rem;
    }
  /* .imagehold runs from 33.34% - 61.10% */
    61.10% {
 /* .imageloaded */
        width: 50rem;
        left: 0rem;
    }

    61.11% {
 /* .imagepreunload */
        width: 50rem;
        left: 0rem;
        right: 50rem;
    }

    66.67% {
 /* .imageunloaded */
        width: 0rem;
        right: 0rem;
        left: 0rem;
        height: 37.5rem;
        opacity: 1;
    }

    66.68% {
 /* .imageoff */
        opacity: 0;
    }

    100% {
 /* .imageoff */
        opacity: 0;
    }
}

@keyframes parallax_three {
 /* controls img.three movement */
    0% {
 /* .imageoff */
        opacity: 0;
    }

    61.10% {
 /* .imageon */
        opacity: 0;
    }

    61.11% {
 /* .imageinitial */
        width: 0rem;
        height: 37.5rem;
        left: 50rem;
        opacity: 1;
    }

    66.67% {
 /* .imageloaded */
        width: 50rem;
        left: 0rem;
    }
  /* .imagehold runs from 66.67% - 94.43% */
    94.43% {
 /* .imageloaded */
        width: 50rem;
        left: 0rem;
    }

    94.44% {
 /* .imagepreunload */
        width: 50rem;
        left: 0rem;
        right: 50rem;
    }

    100% {
 /* imageunloaded */
        width: 0rem;
        right: 0rem;
        left: 0rem;
        height: 37.5rem;
        opacity: 1;
    }
}

#proparallax img.one {
    animation-name: parallax_one;
 /* controls img.one movement */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 11s;
    animation-direction: forwards;
    object-fit: cover;
}

#proparallax img.two {
    animation-name: parallax_two;
 /* controls img.two movement */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 11s;
    animation-direction: forwards;
    object-fit: cover;
}

#proparallax img.three {
    animation-name: parallax_three;
 /* controls img.three movement */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 11s;
    animation-direction: forwards;
    object-fit: cover;
}