Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Ade Ade updated their profile
Friday
Smith Publicity updated their profile
May 29
Tony Pianco replied to ⚡JFarrow⌁'s discussion
How to Embed Ning Communities into other Websites?
"Hi, please help with you code as I am trying to embed Ning groups on my blog that accepts embed…"
May 24
LOPEZ SPANISH CHILD CUSTODY ATTORNEY updated their profile
May 19
Wikiwiki Express Delivery updated their profile
May 18
Jayne Mason updated their profile photo
May 17
Jayne Mason updated their profile
May 17
SanMar Building Services LLC updated their profile
May 17
Aarohi Sharma updated their profile
May 17
Lucy Gray posted a discussion
Hi All, For several years, I've had an ongoing problem with my broadcast emails reaching my…
May 16
Lucy Gray replied to Pam Givens's discussion
Can't send Broadcast emails, or use the invite all members from the event page
"I can send Broadcast emails, but who knows if my members are seeing them because they continually…"
May 16
Sophie Salmon updated their profile
May 15
More…

Meanwhile, you can check our social media channels