Simple, Responsive Slider for Ning 3.0

[SweetPotato]

Hi All

Here is a simple tip to get an elegant and responsive slider onto your Ning 3.0 Community.

It is purely image based, so no titles or descriptive paragraphs involved. This might not be for everyone but it does make it very good for mobile devices. It's a slightly modified version of the FlexSlider found here.

The beauty of this slider is that it will resize according to the device it's being viewed on and it's swipeable on touch devices. The example i'm giving below is a full-width version, however, because it is responsive, you can put it in a middle column, side column and it will configure itself nicely.

Here's what to do:

1. In Social Site Manager, create a Custom Page and add an HTML box to the top of the page like so:
   
   Click to enlarge
2. Insert the following html into the HTML box (when in html mode)
   In case of formatting issues, the html is also attached in the Slider_Ning3.txt below.
   
   
   <div class="flexslider">
   <ul class="slides">
   <li><a target="_self" href=" http://www.YOURURL.ning.com/whatever"><img src=" https://api.ning.com/files/TvzVEaQaNnmC20Dfs2VKPaYWsilhcU6NFtzf-9CsiQhxwXxX*Wmil*Hq9KqmX5RfrR2cpQKDj4o3gIvnM*8*pMNu49dKJMgj/slider1.jpg" /></a></li>
   <li><a target="_self" href=" http://www.YOURURL.ning.com/whatever"><img src=" https://storage.ning.com/topology/rest/1.0/file/get/11389031?profile=original" /></a></li>
   <li><a target="_self" href=" http://www.YOURURL.ning.com/whatever"><img src=" https://storage.ning.com/topology/rest/1.0/file/get/11389036?profile=original" /></a></li>
   </ul>
   </div>
   
   Click to EnlargeNotice that it's just an unordered list and there is no img attribute dictating image size. The images I've used happen to be 900*250px but if you changed the images (in blue above) to 900*900px then the slider would automatically resize to fit them in. The urls will need changing, too.
   
   Just remember that the slider will resize the images to fit the space the slider is in. So, if you're full going width then you'll want wide, high res images, like the ones i've used above, to avoid image quality issues when they are blown up to fit the space.
3. Save the page.
4. Now we need to add some script to the END OF PAGE Custom Code section of your site. In Social Site Manager open the Custom Code section and insert the code below. The .js files are hosted on my NIng 3.0 file manager and will be around for a while but you might want to make copies and host yourself if you so wish.
   
   In case of formatting issues, the code is also attached as slider_custom.txt below.
   
   
   
   <script type="text/javascript" src="https://storage.ning.com/topology/rest/1.0/file/get/931723?profile=original"></script>
   
   <script type="text/javascript" src="https://storage.ning.com/topology/rest/1.0/file/get/931748?profile=original"></script>
   
   <script type="text/javascript">
   x$(window).load(function() {
     x$('.flexslider').flexslider({
       animation: "slide"
     });
   });
   </script>
5. Next comes the CSS. Open the Design Studio and then open the Custom CSS section. Then you'll need to include a fairly large chunk of css, which I have attached as a slider.css file.

And that's it, a simple slider. You can see the full-width demo as illustrated above here and a smaller one column version here (please excuse the state of the site - it's a sandbox debugging site).

Best

SP

slideshow css

slideshow script

[Celso Pederi]

Hi SP. I'm a newbie here. Where would I put the code in "slideshow script". Another thing for step 5 in Custom CSS Section, there are two options(Theme CSS and Global CSS) .

I choose the Global CSS then pasted the CSS code as you can see below. Am I doing it right? I would really appreciate your help on this.

[Martin Buzz]

Just added to my website. Great slide show. Better than the new Ning one, since I need to link to a custom page.... Thanks Sweet Potato for sharing this!!!