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.

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

Anastasiia_NING support posted a discussion in NING BUSINESS CLUB
- Light. Try to make shots during morning and afternoon (дневные) hours. It will strongly influence…
1 hour ago
Alex replied to Alex's discussion
Missing images???
"Yes, I also reported that to Ning Support a while back - but not fixed yet."
15 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Trick: Perfect Combination for Bringing Your Community Into a Facebook Page
"It seems like the only way people respond to posts inside this community anymore is if it is a comp…"
18 hours ago
Fabricio Giugni replied to Fabricio Giugni's discussion
Like button is not working
"Hi There,
I took about a minute to find where it was. It works better when Like button cames under…"
20 hours ago
marie replied to marie's discussion
Landing page navigations do not show menus on mobile screen
"here is the new color : 
rgb(35, 85, 117)
or
#235575"
22 hours ago
marie replied to marie's discussion
Landing page navigations do not show menus on mobile screen
"OMG Anastasiathat is amazing !!!thank youJust the color needs to be changed (sorry I have changed t…"
22 hours ago
marie replied to marie's discussion
Landing page navigations do not show menus on mobile screen
"OMG Anastasia
that is amazing !!!
thank you
I will go into the code to modify the background colour…"
22 hours ago
Anastasiia_NING support posted a discussion in NING BUSINESS CLUB
Here is the list with their names and links to the resources where you can find information about w…
22 hours ago
Anastasia_Ning_Support replied to marie's discussion
Landing page navigations do not show menus on mobile screen
"Hello!
My colleague has made some changes to make it look as close as possible to the picture you s…"
22 hours ago
Anastasia_Ning_Support replied to Fabricio Giugni's discussion
Like button is not working
"Hello!
My colleague has relocated the Like button as you asked, please check it. 
Best regards,
The…"
22 hours ago
Thisisbully replied to Alex's discussion
Missing images???
"Also when you upload say more than one photo at once it will show the first photo u select that man…"
yesterday
Anastasia_Ning_Support replied to Fabricio Giugni's discussion
A list of Problem just growing...
"Hello!
I am sorry, I will insert screenshots into my reply. 
"I can see that you have already check…"
yesterday
More…

Meanwhile, you can check our social media channels