With this flexslider you can add your own linkable images and text to each slide.
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.
<!-- 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>
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.