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! 52281753?profile=original

    • NC for Hire

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

      disco2.gif

    • 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.

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

This Is bully replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Yea it’s better than 2.0 now just need notifications and quick add buttons for the activity feed"
yesterday
⚡JFarrow⌁ and Leon are now friends
yesterday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Thank you! That was one of the main reasons to hold back on migration."
yesterday
This Is bully replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Yes"
yesterday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Does Ning 3 have live chat for the members as does Ning 2?"
yesterday
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hi there!

We do not have such list at the moment, but I will advise with the migration manager if…"
Friday
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Hi Larry!

No, you can stay on 2.0 platform if you prefer, migration is not mandatory.

Bets regar…"
Friday
Anastasia_Ning_Support replied to Lauren's discussion
Looking to Monetize and Improve Engagement
"Hello Lauren! 
I am very sorry to hear it. Unfortunately, there is no way to adjust the sensitivity…"
Friday
Tag Molekulix, Chetan Kumbhar, mariusmv marius and 9 more joined Ning Creators Social Network
Friday
Anna_Ning_Support replied to J.Ayvar's discussion
We need this in Ning 3.
"Hello,
We have the default welcome email that includes the name of the member and the features he o…"
Friday
Naveen Jain updated their profile
Thursday
Linda Hertz liked Anastasia_Ning_Support's discussion Join our new webinar on August 22nd!
Wednesday
More…

Meanwhile, you can check our social media channels