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!

Leave a Reply