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!

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.

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

⚡JFarrow⌁ updated their profile photo
2 hours ago
Ceddy J replied to Thisisbully's discussion
5 months no new updates
"I'm interested in testing future updates."
4 hours ago
Thisisbully replied to Anastasiia_NING support's discussion How to monetize a website: to-do list to get more profit in NING BUSINESS CLUB
"Yea the want push notifications and a quick add button but I can’t give them what they want lol "
10 hours ago
Anastasiia_NING support posted a discussion in NING BUSINESS CLUB
1. Your content should be unique - people will not pay for something they can get elsewhere for fre…
18 hours ago
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Would it be helpful if I made some videos for how to make different things happen on Landing Pages…"
yesterday
Anastasia_Ning_Support replied to Hugh's discussion
Yet Another Ning Disaster - All Pictures Shrunk!!
"Hello Hugh!
We continue to work on eliminating the rest of the issues as well, I apologize for keep…"
yesterday
Anastasia_Ning_Support replied to Thisisbully's discussion
5 months no new updates
"Hello!
I remember, those updates were put on our roadmap and announced here on creators. I will be…"
yesterday
Anastasia_Ning_Support is now a member of NING BUSINESS CLUB
yesterday
⚡JFarrow⌁ replied to Anastasiia_NING support's discussion How to monetize website: Sell or rent internal pages in NING BUSINESS CLUB
"I certainly plan to utilize this when i am able to migrate"
Tuesday
Anastasiia_NING support left a comment on NING BUSINESS CLUB
"If you have your website, you should be ready for something special - communication with your clien…"
Tuesday
Thisisbully replied to Thisisbully's discussion
5 months no new updates
"I was referring to push notifications and quick add buttons on the activity feed that was said to b…"
Tuesday
Thisisbully replied to Thisisbully's discussion
5 months no new updates
"I accept the honesty "
Tuesday
More…

Meanwhile, you can check our social media channels