Javascript Image Slider / Posts /

Multiple Sliders with Centered Navigation Bullets

2

Hi, I have multiple sliders on my page that have varrying amount of images, and I want the bullets centered under the image, but everything I've tried to do has been unsuccessful. I also need it to be able to update the width dynamicaly so I don't have to set a width on the wrapper, as my client will be updating this. Currently my HTML looks like this:

 <div class="slider-head">Q2 - 2012</div>
 <div id="slider1">
        <img src="../Images/small-1.jpg" alt="Caption for slide 1" />
        <img src="../Images/small-1.jpg" />
        <a href="http://www.menucool.com"><img src="../Images/small-1.jpg" /></a>
        <img src="../Images/small-1.jpg" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
    </div>
    <div style="width:10px; height:25px;"></div>
    <div class="slider-head">Q2 - 2012</div>
 <div id="slider2">
        <img src="../Images/small-1.jpg" alt="Caption for slide 1" />
        <img src="../Images/small-1.jpg" />
        <a href="http://www.menucool.com"><img src="../Images/small-1.jpg" /></a>
        <img src="../Images/small-1.jpg" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
    </div>


 and my css for the wrapper/bullets looks like this:

div.navBulletsWrapper  {
 top:160px; /* Its position is relative to the top of the slider*/
 background:none;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

James  7 years ago   viewed: 7980    

6 Answers

3
I tried with demo 1 and it seems working with the following CSS codes. Please inform if it doesn't work for you:

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
top:320px; left:0px; /* Its position is relative to the #slider */
width:100%;
text-align:center;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    display:inline-block;
    *display:inline;/*Old IE hack*/
    zoom:1;
    overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}

Milo   7 years ago
1
it works for me :) the only issue is: the bullets and the slider are "fixed" in their places: when the page is redimensioned to a smaller resolution (my slider width is 1600px), the bullets/slider image don't auto center within this new resolution.  Is there a way to do this?
Marisa   7 years ago
0
Marisa, 
Testing with demo 1, I didn't find it has the resolution reset issue. Maybe I didn't fully understand and test under your environment.
You reset the resolution, not resize the page size, right?
If you reset the resolution, and then refresh the page, do you still have the issue? 
Milo   7 years ago
0
Hi Milo!
Two images to show you what's happening:

1) The way I see the slider on my computer (my resolution is 1920x1080 pixels):
https://dl.dropbox.com/u/45524884/01.jpg

2) the way people with 1024x760 pixels resolution see the page:
https://dl.dropbox.com/u/45524884/02.jpg

I'm resizing the page (using "Web Developer Tools" Firefox add-on) to check how people see it with different resolutions. :)
Thank you!
Marisa   7 years ago
2
I am still in doubt if this will happen if you test it under the real environment. Sometimes the Developer Tools add-on is not reliable. I didn't find this issue when I test it with Demo 1. Would you test it again under the real environment?
Milo   7 years ago
0
I really need the bullets to be centered automatically under the image too, with a dynamic width on the wrapper. I'm trying to do this right now, I tell you if I discover how to...
Marisa   7 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: