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

FORUM

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

Email me when people reply –

Replies

  • A responsive slider......you just made my morning!  Cannot wait now to design some slides on pixlr and get this rolling.  Thank you soooooo much SP!

  • You had said you were working on one.  Big high-five

    1064514594.gif

  • The slider king!

    I learned a trick or two from you SP. I used your technique to trick out the stock slider that came with the Helix II Framework. The results? A miro image slider of what you built for me. Compare www.tdbreviews.com to http://184.173.197.211/~tdb/.

    TDB

  • Thanks for this, SP! I'll have to lok into it further later today.

    Great job!

  • NC for Hire

    SP, Very nice tip! I researched all of the responsive sliders I could find, and chose flexslider too. It rocks. So, don't be surprised if you see another tip with a different spin. =)

    • NC for Hire

      Jen,

      It is indeed awesome, and there are several other layouts to it that I'm sure could be even better than this one (the simplest, to be honest). I tried some of the other versions with thumbnails but the problem was with those thumbnails on smaller devices.

      I'm going to set to work on integrating the various feeds into the slider so that it auto populates with blogs, photos etc but that won't be anytime soon.

      Looking forward to seeing what you do with it, too.

      Regards

      SP

      • NC for Hire

        SP, Yeah, I was quite surprised how easy it was to use, and the licensing being under GPLv2, very cool. I haven't had a request yet about pulling the feeds into the slider, so will leave the "tipping" to you on that one. =)

        Best,

        Jen

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

Ana Massien updated their profile photo
yesterday
Ana Massien updated their profile
yesterday
This Is bully replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"32000 member You can asked for $1 in donation and keep it running."
Saturday
Fashion replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"My site has a bit over 32,000 members. I don't want to close the site, but might have to if prices…"
Friday
Dax Carlisle and Julius Manninen joined Ning Creators Social Network
Friday
Scott Bishop posted a discussion
Does anyone know how to change the font for the navbar to a font that is not listed for Ning 2.0? I…
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning3: How to Create a Combined Feed of All Forums Inside Groups
"212 views of this and no one can provide feedback?  Is this just way over everyone's head or is it…"
Wednesday
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Hi Kyryl, 
How would I be able to use this code to make the navigation be screen wide? I have this…"
Wednesday
⚡JFarrow⌁ replied to J.Ayvar's discussion
Any Code to make a footer Menu like creators Ning 3
"Here is whatI am using.... but i have a collection of footersyou might like to look through and for…"
Wednesday
Anastasia_Ning_Support replied to J.Ayvar's discussion
Any Code to make a footer Menu like creators Ning 3
"Hi there!
One of our representatives have sent you an email, please check it. 
Best regards,
The NI…"
Tuesday
J.Ayvar posted a discussion
Tuesday
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"George, I messaged you through my site www.surfer-shot.com for help. I was able to fix most of it b…"
Nov 11
More…

Meanwhile, you can check our social media channels