How to Add a Simple Image Slider (Using Custom CSS)

Hey all!

In this video, I give you the ClickFunnels custom CSS code to my image slider that you can use, and explain features of it that you can change to make it your own – such as change the video dimensions, add/delete pictures, etc…

Here is the code I used. Simply copy and paste it into the custom Javascript/HTML element in your ClickFunnels!

[code language=”css”]
<style>

#currentfield{
width:400px;
margin-right:auto;
margin-left:auto;
/* Do not change */
overflow:hidden;
}
/* Can change */
#totalfield{
width:2000px;
animation-name:slider;
animation-duration:20s;
animation-iteration-count:infinite;
position:relative;}
/* Do not change */
#totalfield img{
float:left;
}
/* Can change */
@keyframes slider{
0% {left:0%;}
30% {left:0%;}
33%{left:-100%;}
63%{left:-100%;}
66%{left:-200%;}
96%{left:-200%;}
100%{left:0%;}
}
</style>
<div id="currentfield">
<div id="totalfield">
<img src="https://i2.wp.com/images.clickfunnels.com/05/483240103811e7a77d7144695beda6/e132b30e2cfd1c2ad65a5854e4444593e37eeac818b5184196f2c071a4ea_640.jpg?ssl=1&w=400" data-wpmedia-src="https://images.clickfunnels.com/05/483240103811e7a77d7144695beda6/e132b30e2cfd1c2ad65a5854e4444593e37eeac818b5184196f2c071a4ea_640.jpg">
<img src="https://i1.wp.com/images.clickfunnels.com/0c/e7f2b0103811e79768fb52f584cd0d/ec31b1092dfc1c2ad65a5854e4444593e37eeac818b5184196f2c071a4ea_640.jpg?ssl=1&w=400" data-wpmedia-src="https://images.clickfunnels.com/0c/e7f2b0103811e79768fb52f584cd0d/ec31b1092dfc1c2ad65a5854e4444593e37eeac818b5184196f2c071a4ea_640.jpg">
<img src="https://i1.wp.com/images.clickfunnels.com/13/5e2741103811e7b526f5f5a22fa98a/ec3cb00a2ff21c2ad65a5854e4444593e37eeac818b5184196f2c071a4ea_640.jpg?ssl=1&w=400" data-wpmedia-src="https://images.clickfunnels.com/13/5e2741103811e7b526f5f5a22fa98a/ec3cb00a2ff21c2ad65a5854e4444593e37eeac818b5184196f2c071a4ea_640.jpg"></div>
</div>
[/code]

***HERE IS AN UPDATED CODE THAT IS MOBILE-RESPONSIVE!!!!! PLEASE ASK IF YOU HAVE ANY QUESTIONS VIA HERE OR MY YOUTUBE CHANNEL

[code language=”css”]
<style>

#currentfield
{ width:100%;
margin-right:auto;
margin-left:auto;
/* Do not change */
overflow:hidden; }

/* Do not change */

#totalfield img
{ float:left; }

#totalfield
{ width:400%;
height:100%;
animation:slide 16s infinite; }

.slider-1, .slider-2, .slider-3
{ width:25%;
height:100%;
float:left; }

@keyframes slide
{ 0%{margin-left:0%;}
25%{margin-left:0%;}
33%{margin-left:-100%;}
58%{margin-left:-100%;}
66%{margin-left:-200%;}
91%{margin-left:-200%;}
100%{margin-left:0%;} }
</style>
<div id="currentfield">
<div id="totalfield">
<div class="slider-1"><img id="slide1" src="https://images.clickfunnels.com/f0/7b4c2061fa11e7bacc31b21a18365e/slide2new.jpg" style="width:100%;height:100%"></div>
<div class="slider-2"><img id="slide2" src="https://images.clickfunnels.com/a4/ef8b9161fa11e78ca2dbbae2147d28/slide1.jpg" style="width:100%;height:100%"></div>
<div class="slider-3"><img id="slide3" src="https://images.clickfunnels.com/08/66311061fb11e79fc75139ecd77c29/slide3new.jpg" style="width:100%;height:100%"></div>
</div>
</div>
[/code]

What we are essentially doing is stacking together a bunch of images, and then creating a field of focus in the middle (or wherever you want your slider to be). We hide all the other images outside of this focus area, and then use animations like we did in our previous video to create the keyframes and cause the images to translate, or shift to the left (as we went over in our transformations video).

Make sure to keep the image sizes the same, or the image slider will look rather awkward with differently-sized images. If you change each individual image size, also make sure to change the size of the focus area, or you may either only see a portion of the present image, or a piece of the next image, which you don’t want.

In regards to keyframes, make sure to check out the previous video on our ClickFunnels custom CSS animations to get a clearer picture about it, but basically we need to make sure that the times our pictures are shown are consistent across the number of images we have. If we only have 2 images, then we want each picture and transition to occupy 50% of the time. If we have 5 pictures, each picture and transition should occupy 20% of the total time, etc… assuming you want each picture to be shown evenly. So if you want to figure out what your keyframes should say, divide 100% by the number of images you have. Suppose you have 5 images – then each image should occupy 20% as mentioned previously. BUT, we also need to take into account the transition time, so we will need to deduct some percent from that 20. You can make it 1%, 2%, 3%, or WHATEVER you want. Essentially, that is the percentage of the TOTAL time that your animation lasts that your animations will spend transitioning from one slide to the next.

That’s it!

Please subscribe and stay tuned for future videos where we go over the technical how-to’s and dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

10 Replies to “How to Add a Simple Image Slider (Using Custom CSS)”

  1. Thea

    Hi Ivan, thank you for the great videos! I’m completely new at this and I’ve been trying to work out what the codes are suppose to be when it’s 4 images but nothing that I do seems to be working!

    Would you be able to tell me what values I should put into the codes below for 4 images on a mobile responsive code?

    #currentfield
    { width:100%;
    margin-right:auto;
    margin-left:auto;
    /* Do not change */
    overflow:hidden; }

    #totalfield
    { width:400%;
    height:100%;
    animation:slide 16s infinite; }

    .slider-1, .slider-2, .slider-3
    { width:25%;
    height:100%;
    float:left; }

    @keyframes slide
    { 0%{margin-left:0%;}
    25%{margin-left:0%;}
    33%{margin-left:-100%;}
    58%{margin-left:-100%;}
    66%{margin-left:-200%;}
    91%{margin-left:-200%;}
    100%{margin-left:0%;} }

    Apologies for the slightly dumb questions but it feels like I’m just going around in circles.

    Thanks in advance,
    Thea

    Reply
    • Ivan Post author

      Hey Thea! I was unable to reply via wordpress with the code without it automatically converting into images….. So I have emailed you instead.. please check your email with the updated code for the 4 images and it should work perfectly for you. 🙂

      Reply
      • Ivan Post author

        Hey Thea!

        Just wanted to let you know that your Google inbox is full so I wasn’t able to reply to your last 2 messages. 🙂

        Here was my reply to you regarding ClickFunnels:

        ‘Hello Thea,

        Not a problem.

        Right now, ClickFunnels doesn’t have that option, and would require some code in order to set that up.

        My coding knowledge is limited so I don’t quite know how to do that yet, but may research later on, as that could be quite useful.

        To be honest, I would probably not use ClickFunnels as a full-time blog.

        Personally, I use WordPress because it’s just so much easier to manage, not even talking about price.

        They would of course want you to use ClickFunnels for everything, but truth is, they are not experts at everything, and as the saying goes, they are jack of all trades, master of none.

        I would maybe message them and see if they have any solution, but as of now, I believe there is nothing and maybe it’s a feature they will implement in the future.

        I hope that helped and all the best,

        Ivan’

  2. Andre

    Hi Ivan! Thanks for your article. I would love the same code that you gave Thea if you don’t mind. I think once i have a base for comparison, I’ll be able to understand the code more.

    Kindest regards,
    Dre

    Thanks for the value!

    Reply
    • Ivan Post author

      Hello Dre!

      You are very welcome! Thank you for the comment! I have also emailed you the code for the 4 images to your email that you provided here on this blog to post this comment.

      It’s unfortunate that WordPress doesn’t allow me to place the code in the comment without converting into the actual image sliders!

      Let me know if you have any further questions,

      Ivan

      Reply

Leave a Reply