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

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

Votes: 0
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!

      125464705?profile=original

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

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

Garfield Archivist replied to ⚡JFarrow⌁'s discussion
Silly Simple Solutions #5: Inject Youtube Subscribe Button under Videos in Ning
"JFarrow, you're the best. Here is a pic to honor your generosity. I simply used div.left-panel on…"
6 hours ago
Ana Massien updated their profile photo
23 hours ago
Bizz replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"Could you share the code you added so I can take a look, ive sent a friend request in case you…"
yesterday
Antonio Tarricone replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"yep, tried as per your tip and also double checked that the image was available at the link…"
Friday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Members online feature
"Well poo!  Sometimes it does not work.  I get "There are currently no logged-in members." and I…"
Friday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Members online feature
"Thank you! Thank you! Thank you!  We really need this feature."
Friday
J.Ayvar posted a discussion
 Some time ago Mr. John Bizley   kindly shared some amazing tips and every time I start a new…
Thursday
Bizz replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"Did you copy the image into your file manager and then copy the link from the file manager for the…"
Thursday
Diane Chojnowski commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"I should add that we love the ability to add additiona forums to support conferences."
Thursday
Diane Chojnowski commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"We had no problem migrating to Ning 3.0 and are happy about enhanceed features. We had total…"
Thursday
Antonio Tarricone replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"hey Bizz, i tested the part 2 of your tip.. the image will not load. if i copy the image url and…"
Thursday
Rosas † Negras replied to Anastasia_Ning_Support's discussion
Members online feature
"hi Anastasia ! this was not what we expected ... it would be perfect to see the online members left…"
Wednesday
More…

Meanwhile, you can check our social media channels