ClickFunnels: The best way to Add a Easy Picture Slider (Utilizing Customized CSS)

Click Here To Try Clickfunnels For 100% Free


In case you need assistance with a particular challenge and need me to personally check out your setup, I may help! Try the ‘My Providers’ part of my weblog:

What the slider appears like: 0:30

What options it is best to change to customise it your self: 0:59

Keyframes defined: 9:01

If in case you have Three photos you need to insert (versus the 5 from the video), what modifications it is best to make: 14:18

Hey all!

On this video, I provide the ClickFunnels customized CSS code to my picture slider that you should utilize, and clarify options of it that you could change to make it your personal – comparable to change the video dimensions, add/delete footage, and so on… You may simply copy and paste the precise code from this web page (my weblog):

What we’re basically doing is stacking collectively a bunch of photos, after which making a subject of focus within the center (or wherever you need your slider to be). We disguise all the opposite photos exterior of this focus space, after which use animations like we did in our earlier video ( to create the keyframes and trigger the pictures to translate, or shift to the left (as we went over in our transformations video:

Be certain to maintain the picture sizes the identical, or the picture slider will look relatively awkward with differently-sized photos. In case you change every particular person picture dimension, additionally make certain to vary the dimensions of the main focus space, or it’s possible you’ll both solely see a portion of the current picture, or a bit of the subsequent picture, which you do not need.

With reference to keyframes, make certain to take a look at the earlier video on our ClickFunnels customized CSS animations to get a clearer image about it, however principally we have to ensure that the instances our footage are proven are constant throughout the variety of photos we now have. If we solely have 2 photos, then we wish every image and transition to occupy 50% of the time. If we now have 5 footage, every image and transition ought to occupy 20% of the overall time, and so on… assuming you need every image to be proven evenly. So if you wish to determine what your keyframes ought to say, divide 100% by the variety of photos you will have. Suppose you will have 5 photos – then every picture ought to occupy 20% as talked about beforehand. BUT, we additionally must take note of the transition time, so we might want to deduct some p.c from that 20. You can also make it 1%, 2%, 3%, or WHATEVER you need. Primarily, that’s the share of the TOTAL time that your animation lasts that your animations will spend transitioning from one slide to the subsequent.

That is it!

Please subscribe and keep tuned for future movies the place we go over the technical how-to’s and dig deeper into different affiliate marketing instruments!

In case you are thinking about ClickFunnels, or need to be taught extra, really feel free to take a look at their free 14-day trial below my affiliate hyperlink at:

In case you like GetResponse and need to be taught extra, try out their 30-day free trial below my affiliate hyperlink at:

In case you are thinking about ClickMagick, or need to be taught extra, really feel free to take a look at their free 14-day trial below my affiliate hyperlink at:

Right here is my Namecheap affiliate hyperlink as properly if you wish to purchase one among their actually low-cost domains and/or personal e mail:

Thanks for watching, and I am going to see you within the subsequent video!

Click Here To Try Clickfunnels For 100% Free

You May Also Like

About the Author: manager

10 Comments

  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 *