How to Add a Slider to Your Main Page to Promote Special Content

[Eric Suesz]

A lof of people ask us about the "slider" on Creators at the top of our Main Page. They love it. We do, too!

A slider (sometimes also called a "carousel"or "hero" box) automatically rotates in and out promotional content. It's a very effective way to spotlight specific things on your network that you want returning members (and visitors) to notice and visit. You could also use a slider like this to run your own ads, particularly if you have lined up sponsors or advertisers directly and can create an ad for them. It looks like this: 

I know that a number of Network Creators are going to flip over this new slider we've created. It's free for the taking, so check out this article on Adding a Slider to see if it's something you'd like to put on your network.

You will need to be able to upload the images you want to display, and you can do that with the File Manager (among other ways). You will also need to be able to look at some HTML, but these instructions are straightforward and should be doable for most Network Creators. If you're unsure about how to do it, you might want to try it out first on your test network and then paste the final code into a Text Box on your live network. 

Enjoy! 

 

[Ceddy J]

Yes I'm up and running right sir! Thank You James!!! I Appreciate You :)

[Dan "JR" Goodman]

HI James

 

thanks for the help - What size exactly should the photos be, I can resize them in photbucket or photoshop?  When I change the slide distance do I still change everything else?  I tookit down for now, but when I loaded and not changed anything, the slide was too wide, using the ning photos in the example, but no matter which size I changed the photos too, it would not look right.

[Dan "JR" Goodman]

James I think my struggle is there is 3 places to change the code, Custom, Appearance, and HTML on the main page, so when you say change something, I am not sure I should be changing all the codes to 230, that I see or only the ones you suggest.  here is my site www.floridacoolcars.com

[andrea contreras]

hola james hare asi como dice porque de otra manera no me sale lo k quiero la è provado todas y nada provero esta te informero. grasia feliz dia.

[Dan "JR" Goodman]

Ok I loaded everything exaclty as ning posted and I have 3 pictures, scrolling. But of course the ning examples are too big for a side column  (3 row).  What EXACTLY do I need to resize on the code and exactly what size height and width do the picutres need to all fit on the side column?

thank you

[James Hawkins]

Hi Dan,

I'm in Thailand so it's early evening here (early morning in U.S.) and I just got back home from running some errands.

You have to re-size your images to 230px wide with the same aspect ratio as the previous photo had. For example: if the original photo was 690px wide by 450px high then if you reduce it to 230px in width then the ratio of change is 1/3 (used round numbers to make it easy to see) then the height should be 150 (690/3=230 and 450/3 = 150) It won't work out that easy but re-sizing software should do it automatically as long as you set the width as default/important dimension. These are the attributes (or numbers) you should use in the code for height and width. the slide_distance in the //Custom mainpage slider code should be also set to 230 so that one slide width at a time, moves.

The bottom in code below should be set at 0 if you want overlay at bottom of slide

 

    #profile_slider .item .overlay {
   margin-top:-50px;
   padding:18px 18px 12px;
   background:url(http://static.ning.com/design/images/60alpha.png) repeat scroll 0 0;
   position:absolute;
  bottom:87px;
  width:653px;

 

You're also going to have to play with the size of font and line size in the overlay code otherwise it will cover a lot of the smaller images you will be showing. Maybe something like 14 or 16 ...trial and error I think to see what is appropriate and looks good.

 

#profile_slider .item .overlay h3 {
font-size:24px;
line-height:24px;
float:left;
text-transform:capitalize;
color:#fff;
width:520px; < this changed to 230

 

and then you'll need to change the attribute for distance from bottom for nav buttons...

#slider_nav {
position:absolute;
bottom:30px;    <this maybe to 10px if you set overlay to bottom
right:20px;      <this to maybe >10px as well because of narrower column

All in all a lot of tweaking (trial and error) needed to put this in a side column! If you give it a try and run into any other problems, post back and i will try to help. ....oh, and you'll not have hardly any room for titles/text!

James

[Duraine Williams]

Whats your webs address, to see the site? 

[RJ Blanco]

 This is great! And it works like a charm! Thank you.

[9jabook]

Slide headers and text not showing for mine also changing the width in the code does not affect it !

[James Hawkins]

Hi 9jabook,

Is it live on your site now? Can you give me a link so I can see what is happening?

James

[9jabook]

http://www.9jabook.com/  thanks a lot

[James Hawkins]

Hi,

You're going have to start by re-sizing images (and/or crop) so they all have the same dimensions (height and width) For the center column it should 502px wide. That's the important one. The height will depend on how you crop/resize so that the images look their best. Just be sure it's consistent within a few pixels. Set the height in the code to the "shortest" picture.

Slide distance needs to be set to width of 502px as well:

 

//Custom mainpage slider
var slider_back = x$("#slider_back"),
slider_fwd = x$("#slider_fwd"),
slider_strip = x$("#profile_slider_inner"),
slide_distance = 653, /* Determines width of slider in pixels */
current_slide_position = 0,
total_num_slides = 3, /* Determines number of slides in slider */
max_slide_position = (total_num_slides-1) * slide_distance * -1;

 

Overlay positioning will have to be played with after you get the pics the right size.

The image in Eric's post has the arrows one over the other, if you want them on the same horizontal line as it is in the tutorial live example (it will show best that way in all browsers) check to see that in your code that no <br> is between the two lines of code highlighted below. If there is, delete it.

<a name="slider_back" class="btn" id="slider_back"></a>
<a name="slider_fwd" class="btn" id="slider_fwd"></a>

these are the last two lines of code you placed in text box. OK, This will keep you busy for a bit!

 

I've got to head back home on my bike soon, I'm in Thailand so it's morning here. Will check in this evening to see if you have got things rolling.

James 

p.s. I've probably forgotten something so don't despair if it isn't perfect, yet. We'll get it figured out. ...talk to you later.

EDITED: see I needed to change something already. Code for arrows is in text box.