ClickFunnels: How to bring a Simple Image Slider (Utilizing Custom CSS)

Click Here To Try Clickfunnels For 100% Free

should you require assistance with a certain problem and need me to take a look at your installation, I can help! Check out the’My Services’ part of my site:

What the slider resembles: 0:30

What features you need to change to personalize yourself: 0:59

Keyframes clarified: 9:01

In Case You Have 3 pictures you need to add (Instead of the 5 in the movie ), what changes you need to create: 14:18

Hey all!

In this movie, I provide you with the ClickFunnels habit CSS code into my picture slider which you may use, and describe features of this which it is possible to alter to make it your own – like alter the movie measurements, add/delete images, etc.. . You can just copy and paste the Precise code from the webpage (my site ):

What we’re essentially doing is piling together a lot of pictures, and then developing a field of attention in the centre (or where you desire your slider to be). We hide the Rest of the pictures out of the focus area, then use animations as we all did in our past video ( to make the keyframes and trigger the pictures to interpret, or change to the left (as we all moved within our transformations video:

Be certain you keep the picture sizes exactly the same, along with the picture slider will appear rather clumsy with differently-sized pictures. Should you alter each individual picture dimensions, also be certain that you modify the size of this focus region, or you might either just find a part of the current picture, or a bit of the following picture, which you do not want.

In reference to keyframes, be certain that you have a look at the previous video on our ClickFunnels habit CSS animations to have a clearer image about it, but essentially we will need to be certain the occasions our images have been displayed are consistent throughout the amount of pictures we’ve got. If we just have two pictures, then we need each image and transition to occupy 50percent of their time. When we’ve got 5 images, each image and transition must occupy 20percent of their entire time, etc.. . Assuming you need each image to be displayed equally. Therefore, in the event that you would like to determine what your own keyframes should convey, split 100percent by the amount of pictures you have. Guess you have 5 pictures – then every picture should occupy 20percent as mentioned before. BUT, we also ought to consider the transition period, therefore we’ll have to subtract some percentage from this 20. It’s possible to make it 1%, 2%, 3%, or anything you want. Basically, that’s the proportion of the entire time your animation lasts your animations will probably spend transitioning from 1 slide to another.

That is it!

Please register and stay tuned for future movies at which we discuss the specialized how-to and dig deeper to other affiliate marketing tools!

If You’re interested in ClickFunnels, or want to learn more, feel free to test their free 14-day trial below my affiliate link in:

Should you prefer GetResponse and also want to learn more, try out their 30-afternoon free trial below my affiliate link at:

If You’re interested in ClickMagick, or want to learn more, feel free to test their free 14-day trial below my affiliate link in:

This is my Namecheap affiliate link also if You Would like to Purchase one of the very cheap domains or personal email:

Thank you for viewing, and I will see you at another movie!

Click Here To Try Clickfunnels For 100% Free

You May Also Like

About the Author: manager


  1. The link for the code is in the description (it's easier copying it from a site where I can lay it out as a CSS code).
    Step 1: Go to the site specified (my blog)
    Step 2: Copy the entire code I have input
    Step 3: Paste the entire code into your java/html element on any webpage (we are using ClickFunnels)
    Step 4: Change anything you want as mentioned in the video to suit the slider based on your needs!

    It's a lot of steps, but sure beats learning coding!

  2. Thank you for this! So I added 10 pictures and I think the keyframe is correct but after the first 4 pics, the rest are stacking up under each other instead of sideways. And then the slideshow doesn't repeat. How can I fix this?

Leave a Reply

Your email address will not be published. Required fields are marked *