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

James Slater replied to James Slater's discussion
Event Text
"Hiya thanks for this its very appreciated the links of the page name is below my network name is ht…"
7 hours ago
James Slater and Tavolo Ornitologico are now friends
8 hours ago
Bizz replied to Bizz's discussion
Tip: PROFILE THEMES
"Well the Themes are coming along nicely and just added another Gamer Theme. You will notice that al…"
16 hours ago
kostasgr replied to Anastasia_Ning_Support's discussion
Activity feed update
"hi Anastasia !! cool !!  thanks for the update....!  ...That is what is needed..!!"
16 hours ago
Bizz replied to James Slater's discussion
Event Text
"By the way what is the page name for the castings events ?"
19 hours ago
Bizz replied to James Slater's discussion
Event Text
"Yes can do it but not with CSS, going to take a bit of work so give me a while to sort it out as a…"
20 hours ago
⚡JFarrow⌁ and Tavolo Ornitologico are now friends
22 hours ago
kostasgr posted a discussion
RSS does not work ??someone else has a problem  RSS ??????and the speed has dropped a lot  ???
yesterday
James Slater replied to James Slater's discussion
Event Text
"Hi thanks for replying back I have 2 event pages on my network page one I need keeping same as it i…"
yesterday
Stark and Tavolo Ornitologico are now friends
yesterday
Bizz replied to James Slater's discussion
Event Text
"Which part do you want to change ?"
yesterday
James Slater posted a discussion
Hi does anyone know the CSS coding for the event pages? I need to change some text of the CSS codin…
yesterday
More…

Meanwhile, you can check our social media channels