TIP: The Simplest Minimal Image Slider No Javascript

[⚡JFarrow⌁]

You want a slider for your homepage or otherwise but do not want to be bothered with javascript.  Here is your solution. CSS and HTML only.  Works on 2.0 and 3.0 Ning sites

HTML Part to add in your Sites and Pages HTML Module:

<div class="jfcontainer">
<img class='jfphoto' src="https://api.ning.com/files/fQMda3vPGn91LxWIc0DZBbYfyiZXn4VGy*yZKLv5ZTiJ-MmkCaGZ5OqAT8LYQWgpErNXaMTwc4sZqkBDFhI3pCcBITxj6Jaa/10009876_10151975450856776_1992852724_n.jpg?width=737&height=414" alt="" />
<img class='jfphoto' src="https://api.ning.com/files/Z64umNMxaE2kkWKm5Oizmu7L*XGGkk*jOtfHPUV2qwiYs9aD4MIzIZjkKYMOyF2AgzGMbNvbNUVOj3hvKKg4yg__/IMG2011071200152.jpg?width=737&height=545" alt="" />
<img class='jfphoto' src="https://api.ning.com/files/uzilsaiafNraK6X9q2rRJ6*KUdLmPCLdNl3qf01pqNea1wZzaoSC4Ba2wWo7p4xkIJdVkpwxdG1rCsj2KWEqqjaeUUChGYa0/20150128BOUNDARYMARKER.jpg?width=737&height=505" alt="" />
<img class='jfphoto' src="https://storage.ning.com/topology/rest/1.0/file/get/14188355?profile=RESIZE_1024x1024&height=414" alt="" />

</div>

*replace the links in red with your own image links

*right click on any of your network images/copy url and replace with mine

*notice the alt=""    be sure to add a description of your image inside the quotation marks

----------------------------------------------------------

Now add the following CSS to your Design Studio CSS Section:

.jfcontainer{
margin:50px auto;
width:500px;
height:400px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;

}
.jfphoto{
position:absolute;
animation:round 16s infinite;
opacity:0;

}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

*Notice You can adjust the size of the slider and the colors on the borders easily in the first part of that CSS code

* FYI instead of javascript controlling the timing and slide order, this code uses CSS3 keyframes to control the animation.  So, if you add more images, you'll need to account for it in the last section of the CSS.

This is basically what it looks like... i just threw this one together..you can play around with the code here on my codepen

Let me know what you think and feel free to reach out to me if you need help with your Ning network.

[George H. Compton IV]

Sweet, nice work, JF

[⚡JFarrow⌁]

thanks George

[⚡JFarrow⌁]

the idea here is simple..