Simple Plug 'N Play Content (Carousel) Slider

[Kris]

Find more videos like this on Creators

Step 1) create a new middle column text box
Step 2) copy and past the simple slider script into the text box
Step 3) update image file and link locations with your own

In this example I used 500x136 images, but you could make the image height any size, just remember to update the script w/ the new height size.

There are also a few other variables you can control such as speed, slide direction, and weather or not to show the next and previous buttons.

You can also use the code in the Hero Box
for the hero box you'll need to change the height of CSS snippet inside the "Advanced" and the height of the script to match the image size or a few pixie larger depending if you show the buttons


Find more videos like this on Creators

This can all be 100% done using your Ning network with out having to host any files off Ning.

[SweetPotato]

Hi Wes,

Just to clarify, the carousel I'm using is the one here

Download and extract the zip files. You then need to host the carousel files outside of Ning (unless you have a Pro account in which case you might be able to use the file manager - i'm not so no idea how it functions).

I hosted and configured mine here

The iFrame code looks like this and is pasted into the middle text box:

 

<div id="spotlight" class="space"><iframe src="http://www.grabtheladder.co.uk/Defero/" marginwidth="0" marginheight="0" width="475" frameborder="0" height="165" scrolling="no"></iframe></div>

 

in the text box on the left paste this:

<div id="spotlight" class="space"></div>

 

Then paste this CSS in your Advanced appearance section in admin (and play around with the margins etc as you see fit):

 

/* carousel on homepage */
.space {height:250px;} /*Height of the Hero Area */
.module_text .xg_module_body {overflow:visible;}
#spotlight {margin-top:-5px;margin-bottom:-1px;margin-left:-245px;width: 743px;}
#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:743px;}

 

Hope that helps

Mark

[George Montgomery]

Totally awesome !

This is a great feature for any NC.

Thanks for sharing.

[Michelle]

Kris - do you think I can still implement a longer slider even though I have a 2-column hack on my site?

http://connect.state.gov

[Michelle]

Nevermind - I will try to figure it out based on earlier comments..

[K.King]

yes you can check mine http://swagg.ru/

[K.King]

Thanks works great!I customized it a bit and its great check http://swagg.ru/

[Kris]

looks good

[John Drake]

This is great. Thanks for providing.

The box shows each slide in turn then quickly scrolls back to the first to repeat the process.

Is there code that will enable it to just return to the first following the last without the scrolling, or to just scroll slowly in reverse?

Thanks John D

[Kris]

I don't have one but if you find one be sure to share it

[Katie McKay]

Thanks Kris, I wondered how you did that, it looks great on your site. I'm going to add it to mine soon.

[Kris]

actually we use our adverser to change the image with every page view on our sites. Next to the radar we thought it was just to much going on

[Katie McKay]

I found some code to load random images on site refresh. I am going to use that instead of the slider in the top spot on my site because the slider has a bit of delay and double image when you open the site. I am going to use the slider to show store products on another page or maybe another text box. Thanks for sharing Kris!