Javascript Image Slider / Posts /

Bullets and Arrows

21
I changed the size of the slider to 590px wide by 443px high. I can not see the bullets for demo 1 on my page. Also I implemented the arrow navigation from slider 4 but that is not showing up either. How do I adjust the css to make these appear? thank you in advance!
Nicole  6 years ago   viewed: 6390    

5 Answers

0
I had the same problem. In my case the solution was to add the full URL of bullet.png in this line of the CSS file ...

background:transparent url(images/bullet.png) no-repeat 0 0;

... because I didn't have the image and the CSS file in the same directory. Hope that helps.
Jon   4 years ago
1
I have the same problem. I adjusted the CSS slide size to  width:970px; height:380px;
Then, my bullets seems to be either not showing below the slider or it's behind the slider. I didn't change any CSS for the slider besides the size. Below is the bullet CSS. I already moved the images to the css folder.

#slider div.navBulletsWrapper  {
    top:320px;/* Its position is relative to the #slider */
    text-align:center;
    background:none;
    position:relative;
    z-index:5;
}

/* each bullet */
#slider div.navBulletsWrapper div
{
    width:11px; height:11px;
    font-size:0;color:White;/*hide the index number in the bullet element*/
    background:transparent url(css\bullet.png) no-repeat 0 0;
    display:inline-block; *display:inline; zoom:1;
    overflow:hidden;cursor:pointer;
    margin:0 6px;/* set distance between each bullet*/
}

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

Mini   4 years ago
0
Open the downloaded slider CSS file, and edit the  div.navBulletsWrapper property.
For example:

div.navBulletsWrapper {
top:600px; left:180px;
... ...
}

or:

div.navBulletsWrapper {
top:auto; bottom: -30px; left:180px;
... ...
}


Milo   6 years ago
0
I did that for the bullets. However they still are not in view. When I roll over them with my mouse they work - I just cannot see them.

Any thoughts on the arrow navigation?

I really appreciate your help!

CSS

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
    top:459px; left:280px; /* Its position is relative to the #slider. Don't set #slider "overflow:hidden;" if bullets are to be positioned outside of the #slider. */
    width:150px;
    background:none;
    position:relative;
    z-index:5;
    cursor:pointer;
}

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

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


/*----------- navigation buttons on both sides of the slider -----------*/
.group1-Wrapper
{
    position:absolute;
    z-index:20;
    top:120px;
    margin-left:50%;/* position it in the middle of #sliderFrame */
    width:1px;
}
a.group1-Prev, a.group1-Next
{
    width:50px;height:150px;
    background:transparent url(navButtons2.gif);
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    user-select: none;
}
a.group1-Prev{background-position:0 0; left: -510px;}
a.group1-Next {background-position:0 -150px;left:460px;}

a.group1-Prev:hover{background-position:50px 0;}
a.group1-Next:hover {background-position:50px -150px;}


HTML

<!DOCTYPE html>
<html>
<head>
    <title>Demo 1 - Menucool Image Slider</title>
    <link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="scripts/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="sliderFrame">
           <div id="slider">
            <a href="" target="_blank"><img src="images/Office_Solution_1_A.jpg" alt="Sweet Desk!" /></a>
            <img src="images/Office_Solution_2_B.jpg" alt="WOW!" />
            <img src="images/Office_Solution_3.jpg" alt="Black Anodized Profiles!" />
            <img src="images/Office_Solution_4.jpg" alt="#htmlcaption" />
            <img src="images/Office_Solution_5_A.jpg" alt="WOW!" />
           </div>
        <div class="group1-Wrapper">    
        <a onclick="imageSlider.previous()" class="group1-Prev"></a>    
        <a onclick="imageSlider.next()" class="group1-Next"></a> </div>
        <div id="htmlcaption" style="display: none;"><em>AmazingSolution!</em> <a href=""></a>
        </div>
       
    </div>
</body>
</html>



Nicole   6 years ago
0
Then I suggest you start again from copy & paste with the Demo 1. Make sure it is working. Then replace the images with your own, and change the CSS accordingly. Sometimes your images URL may not correct, sometimes the bullet icon is not properly configured. Starting from the scratch is a better way to find bugs.
If the demo 1 doesn't work, then something on your page has a conflict with the slider.
Milo   6 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: