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

FORUM

NC for Hire

I'm providing code to install a light and simple slider with text content under each slide into your page.  You will want to replace everywhere it says https://yourimage in the HTML with your own images.  The code below is for 4 images but you can add more if you like.   Here is what it will look like and here is the pen to use as a playground.

 

 

HTML (goes inside the page modules or below the navigation)

<ul id="lightSlider">

<li>
<div class="lightSlider-image-wrapper">
<a href="#">
<div class="lightSlider-image" title="Image Title" style="background-image:url(https://yourimage);"></div>
</a>
</div>
<div class="lightSlider-text">
Lorem ipsum dolor sit amet.
</div>
</li>

<li>
<div class="lightSlider-image-wrapper">
<a href="#">
<div class="lightSlider-image" title="Image Title" style="background-image:url(https://yourimage);"></div>
</a>
</div>
<div class="lightSlider-text">
Lorem ipsum dolor sit amet. This box is going to have more text than the first one.
</div>
</li>

<li>
<div class="lightSlider-image-wrapper">
<a href="#">
<div class="lightSlider-image" title="Image Title" style="background-image:url(https://yourimage);"></div>
</a>
</div>
<div class="lightSlider-text">
Lorem ipsum dolor sit amet. This box is going to have more text than the first one.
</div>
</li>

<li>
<div class="lightSlider-image-wrapper">
<a href="#">
<div class="lightSlider-image" title="Image Title" style="background-image:url(https://yourimage);"></div>
</a>
</div>
<div class="lightSlider-text">
Lorem ipsum dolor sit amet.
</div>
</li>

</ul>

 

 

CSS (goes inside Design Studio)

.lightSlider li {
border-bottom: 3px solid #E75521;
}

.lightSlider-image {
height: 500px;
}

.lightSlider-text {
padding: 30px;
min-height: 200px;
}

 

JS (Goes in Custom Code bottom)

<script>

x$(document).ready(function() {
x$("#lightSlider").lightSlider({
item: 2,
slideMove: 1,
adaptiveHeight:true
});
});

</script>

 

ENjoY!

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

  • You rock!

    • NC for Hire

      thanks Kos... glad someone found it useful...glad that someone is you!

    • KOS, Could a slider in my Header "spruce it up"? What do ya think?

      Maybe I could add News Feeds? Oh, my brain is starting to see all kinds of use for this!

      what do ya think?

  • I can't even find discussions about 2.0 seriously- when I saw your subject line included 2.0 I was like Yahoo! 

    But is there still tips for 2.0 somewhere- I do not see it listed... and I need lots of help! If I am stuck with my 2.0- then I might as well try ot make it good!

    I love this idea!

This reply was deleted.

Featured Discussions

Announcements

 

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

Sommet de l'Immobilier Digital updated their profile photo
6 hours ago
Sommet de l'Immobilier Digital updated their profile
6 hours ago
Sommet de l'Immobilier Digital updated their profile photo
6 hours ago
Bizz replied to Nique Stevenson's discussion
Directory Page
"Yes yhere is a way of doing something like that, i've made various things like this over the years…"
9 hours ago
Bizz replied to Jelena's discussion
Upload and play videos direct to ning 3
"Hi Jelena, pop me a link to the site and will take a look as it looks like it's something to do wit…"
yesterday
Jelena posted a discussion
Hello I have had been dealing with this new issue since ning made the last update ot the platform.I…
yesterday
Anna_Ning_Support replied to Annabel Gregory's discussion
Our website is blocked
"Hello,
We checked the site again and it is shown as the secure one in FireFox also.
Please, check t…"
yesterday
Anna_Ning_Support replied to Gerard Nealy's discussion
SSL???????!!!!!
"Hello,
We reported the issue to the Technical Team.
You will be informed as soon as it is fixed via…"
yesterday
Anna_Ning_Support replied to Suzie Nielsen's discussion
Migration Ning 2- Ning 3
"Hello, Suzie!
We kindly ask you to contact our Support via support@ning.com with this request.
Plea…"
yesterday
This Is bully replied to Suzie Nielsen's discussion
Migration Ning 2- Ning 3
"Sure "
Sunday
⚡JFarrow⌁ replied to Suzie Nielsen's discussion
Migration Ning 2- Ning 3
"you may want to contact support to get them to unlock it for you.."
Sunday
⚡JFarrow⌁ replied to Suzie Nielsen's discussion
Migration Ning 2- Ning 3
"i managed to get the 2.0 quick adds into my 3.0... let me know if you need the codes..."
Sunday
More…

Meanwhile, you can check our social media channels