Javascript Image Slider / Posts /

Automatically center the bullets as slides are added

29
What am I missing in order to automatically center the bullets as I add more images?  It seems that "margin: 0 auto" in the navigation div doesn't do the trick and I don't want to have to increase/decrease the left property every time the number of slides goes up or down.

This shouldn't be that difficult, right?  It's something simple that I'm overlooking right, because this is too good of a script to not allow for AUTO centering.
Paul J  10 years ago   viewed: 11094    

6 Answers

1
You have a very good suggestion Paul. 

Just remove the: div.navBulletsWrapper  { left: ...px; } or change it to div.navBulletsWrapper  {left:auto;}
and add: div.navBulletsWrapper  {margin: 0 auto;}. Then the bullets will be centered automatically.

milo   10 years ago
0
Thanks for the reply.  I had tried that, and it isn't doing the trick.  Basically what you suggested works as long as I have 6 slides and the div.navBulletsWrapper is set to {width:140px;}.  But if I take out a slide or add a slide or change the width, the bullets are no longer centered.

More info to help figure it out:
My slides are 950x405, so I've changed the properties of #sliderFrame and #slider to match that.
Paul J
  10 years ago
1
Maybe width:140px has no enough room for the slider's bullets?
Would you stage a testing page online with only the slider so that I can have a look and play around based on it?
milo   10 years ago
1
Here's the link to the testing page.  thegatheringnow.com/menucool.htm 

I've added as many as 10 slides, and as long as I increase the width to 22px per dot, it stays centered (so width:220px for 10 slides).  But if I leave the width at 220px and only have 5 slides, the dots don't re-center.  Instead they stay at the same place on the left side.  Makes me think there's something somewhere else that's left-aligning the dots within the wrapper, so the wrapper is auto centering, but the bullets inside it aren't.

Thanks for the help.
Paul J
  10 years ago
4
You can try out the below updates:

div.navBulletsWrapper  {
width:240px;
text-align:center;
}

div.navBulletsWrapper div 
{
    float:none;display:inline-block;
}
Milo   10 years ago
0
That did the trick, although in order for the centering to take place automatically, the width of the div.navBulletsWrapper needs to be the same width as the #slider (in my case, 950px).  That keeps the bullets from starting a second row.  I updated the testing page to show what I mean.  Not that I'll ever have 25 slides, but the code handled it just fine with {width:950px}.

Thanks for all your help.  Great tool that I'm glad to use on our site.  I'm sure I'll be posting more later when I try adding the thumbnails. ;)
Paul J
  10 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲