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

With this flexslider you can add your own linkable images and text to each slide.

click here to see it live

place this code in your Custom Code <Head> Code box
or for individual pages place the code in the appropriate "Below Header HTML Box"
You can also add it to individual groups, articles and blogs. Just place both sets of codes in the HTML box of the page you're creating. That way you can have different slides for the different pages groups, articles and blogs or whatever page you want.

<!-- Start N3 flexslider -->
<!-- Custom Code <Head> Code box -->
<!-- or Below Header HTML Box  -->
<link rel="stylesheet" href="https://storage.ning.com/topology/rest/1.0/file/get/11511378?profile=original" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://storage.ning.com/topology/rest/1.0/file/get/1007061?profile=original"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider(); });
</script>
<!-- End flexslider -->


This is the HTML for the flexslider place this code in any HTML box on any page. You may add as many images as you would like just copy one of the li divides and add it to the code.


<div class="flexslider">
<ul class="slides">
<li><a href="http://link_to.com/" target="_blank"><img src="http://your_image.jpg" /> 1 your text</a></li>
<li><a href="http://link_to.com/" target="_blank"><img src="http://your_image.jpg" /> 2 your text</a></li>
<li><a href="http://link_to.com/" target="_blank"><img src="http://your_image.jpg" /> 3 your text</a></li>
<li><a href="http://link_to.com/" target="_blank"><img src="http://your_image.jpg" /> 4 your text</a></li>
</ul>
</div>


Editing the HTML.

In this HTML code there are four li divides. You'll need to change three things in each li divide.

The first link which looks like this "http://link_to.com/" is your clickable link change it to wherever you want the image and text to lead to when clicked.

The second link which looks like this "http://your_image.jpg" It's your image link replace that one with the image you want to display. Recommended image size 640 x 420 or larger

And finally you can add your text. It's at the end of each li divide, it looks like this "your text" just replace the words your text with whatever you want it to say. I wouldn't add too much text to it, may be a few words or a sentence max.


Example
This is the completed HTML file that I'm using on crossroads.

<div class="flexslider">
<ul class="slides">
<li><a href="http://4himalone2.ning.com/" target="_blank"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11511468?profile=original" />the love of god </a></li>
<li><a href="http://4himalone2.ning.com/" target="_blank"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11511462?profile=original" /> Is all around you.</a></li>
<li><a href="http://4himalone2.ning.com/" target="_blank"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11511405?profile=original" />the love of god </a></li>
<li><a href="http://4himalone2.ning.com/" target="_blank"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11511482?profile=original" />Is all around you.</a></li>
</ul>
</div>

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

  • You know I never understood what sliders would be useful for though, I was thinking for a videos or photos page would be great to add that in between page pagination. Any way to do that?

    • I'm kind of thinking of an ajax slider with automatic scrolling.

    • I'm sure there is a way to do that. I just added a way you can insert these into individual groups, blogs and articles. Maybe that will help.

      I will also look into the Ajax slider. Even though this one does have automatic scrolling unless you use the navigation.

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels