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!

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

Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Hello!
You are not able to edit your landing page in the draft mode because of the current bug. Onc…"
3 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Hello!Thank you for sharing your work with us! I, personally, really like the main landing page. 
H…"
3 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Hi there!
Thank you for letting us know! I`ve added your network to the report as well so we can pr…"
3 hours ago
Lucie Stephens, Tiffany Bethea, Jeremy Carrasco and 4 more joined Ning Creators Social Network
4 hours ago
Dan Lee replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Best way to edit is to use google chrome https://brainwavefusion.com/home"
9 hours ago
Ceddy J replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"I have been quiet as I have been one of the beta testers. Not only is this a smart default landing…"
yesterday
J.Ayvar replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"My website is also one of those that can not use this new tool. Actually, When i click to the edit…"
yesterday
Zachary Hunt replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"ALthough it`s beta version, everything is going right, I like it. Ning, very well, it`s a right way…"
yesterday
Philip Voice replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"I set up a test home page but I can't add content to it. I also found that I had to save as a live…"
yesterday
Caroline Barratt, Nicole Choman, Andrea Retini and 3 more joined Ning Creators Social Network
yesterday
Bradley Combs replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Great news, thank you. A necessary feature, it`s cool that you added this opportunity! "
yesterday
Anastasia_Ning_Support replied to Dr. Krishna Kumari Challa's discussion
Why isn't my Ning network site not secure?
"Hi there!
Please accept my apologies for the inconveniences. I have made a request to install SSL c…"
yesterday
More…

Meanwhile, you can check our social media channels