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

NC for Hire

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

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

    • NC for Hire

      The page you've linked to is no longer available. I took a look at your homepage and you appear to have some images in list format but they are not using the html presented in this discussion and their is no script running on the page so I can't really help with what you have up at present.

      SP

  • Hello SweetPotato. I Like the responsive slider, easy to implement, but I a having issues with sizing on my NING 3.0 site. The image hangs past the defined space from the bottom, and also not full on the right side. I inserted the code on the "Below Header HTML Box". please help. See attached image 3236417?profile=RESIZE_1024x1024

    • NC for Hire
      Hi David, can you post your link please.
      SP
      • Thanks Sweet Potato. I finally figured it out. I edited the Custom CSS. The URL is "http://bifoba3.ning.com/" I am still in the migration process.

  • Thanks a lot, it was very helpful! I am very new to the ning community and just starting to use all the nice tips of yours, everything works perfect. The only this I'm missing is adding a text to slides..

    • NC for Hire
      It's easily done but i can't really add as a tip because there's not really a uniform way of doing it that woud suit all networks and all devices. I'd be opening a can of worms. Pm me if you want paid help (sorry)
  • NC for Hire

    For anyone who is interested in dynamically loading blog posts into this slider (i.e. no manual updates), you might be interested in the plugin I have created here.

    Cheers

    SP

  • does anyone know why sliders arent working on ning anymore? i even tried this one and the same problem as the one we coded happens...

    here is our site, the top left and center boxes are meant to be sliders for the articles and such. as you can see, they just stack, but never load into the slider.

    www.technobass.net

    any help would be greatly appreciated, as our new edition launched today and it has already been like this for a month. :-/

  • Sweet Potato this is an excellent slider and it was soooo easy to add, which is needed for a novice like myself :)  I was wondering if you could help me out with the large space on the bottom and top margins of the slider...here is my site's link http://cfaolc.ning.com/become-a-coach.  I've tried to play around with the CSS, changed the bottom and top margin to the flexsilder.slides, but not successful :(  Help please!

    Thanks in advance!

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