Slideshow Navigation

Question

davy_yg 2 Posting Whiz

14 Years Ago

Hi,

Can anyone help me fix the slideshow navigation ?

First, the navigation is far too far on the left.

Second, how to erase the black bullet next to the round gray button ?

Third, I would like those gray button to be on top of the slideshow just like the 3 gray picture button on top of the slideshow.

slideshow3(1).php

<html>

<style type="text/css">

#slideshow_wrap{ width: 1700px; text-align:center; position:relative;overflow:hidden; height:400px }

#slideshow { margin: 0 0 0 -200px; height: 232px; width: 232px; margin:  auto;} 
#slideshow img { padding: 15px; border: 1px solid #ccc;  background-color: #eee; } 
#nav { position: absolute; bottom:30px; left:30px; z-index:50}
#nav li{
    float: left;
    margin-right:6px;
    width: 20px;
}

#nav a {
    display: block; 
    border: 1px solid #CCCCCC; 
    border-radius: 50%; 
    width: 12px;
    height: 12px;
    background-color: green;		
	background: url(images/buttonnav.png);
	background-position:-3px -28px; 
}

#nav li.activeSlide a {
	background-color: yellow; 
	background: url(images/buttonnav.png);
	background-position: -3px -8px; 
}

</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

$(function() {

    $('#slideshow').after('<ul id="nav" />').cycle({
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"></a></li>';
        }
    });
});

</script>

<div id="slideshow_wrap">
    
    <div id="slideshow">         
        <img src="http://localhost/ocklaw/images/banner1.png"/>        
        <img src="http://localhost/ocklaw/images/banner2.png"/>         
        <img src="http://localhost/ocklaw/images/banner3.png"/>   
    </div>
    
</div>


</html>

html-css javascript web-design

4 Contributors
10 Replies
130 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by davy_yg

Dani AI

Generated 9 Months Ago

Short checklist and targeted fixes (addresses the three points raised by ; builds on observations from , and ).

The black dot: that is the UL default marker and also often comes with the default UL left padding. was correct to call this out — remove the marker and zero the UL padding/margin so the nav sits flush with its container. Use the browser dev tools to confirm the UL’s computed list-style and padding values before changing styles.

Why the pager sits far left: the visible shift is usually due to a negative margin on the slideshow combined with an oversized parent container. When an absolutely positioned pager is measured against the wrong ancestor (or the slideshow has an intentional negative offset), the left coordinate will appear wrong. Verify the pager’s offset parent and the slideshow wrapper’s width in DevTools. If the pager was created after the slideshow element, move it inside the positioned wrapper so absolute coordinates are relative to the wrapper.

Putting the round buttons on top of the slideshow: the pager must be inside the same positioned container and given a positive z-index and a top coordinate (instead of bottom). A modern, robust centering approach is to center the pager with left:50% and transform:translateX(-50%), which avoids hard-coded left offsets and keeps the pager centered even if the slideshow width changes.

Example CSS (new; not shown earlier in the thread):

#nav {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  padding: 0;
  margin: 0;
}
#nav li { display: inline-block; margin: 0 6px; }

Practical workflow: upload images so everyone can reproduce (’ point), open DevTools, inspect computed values for #nav and its offset parent, move the UL into the wrapper (append it to the wrapper), then apply the centering/top/z-index rules above. For older IE where transform is unavailable, center with left:50% plus a negative margin-left equal to half the pager width. Relevant references: CSS position and transform on MDN and jQuery’s DOM-manipulation methods for moving elements if needed.

All 10 Replies

floatingDivs 21 Junior Poster

14 Years Ago

We can't view your website. My guess is that you are running it on a local server off your desktop and you decided to turn off the PC (or just the server).

Can you put this up on a 99.9% uptime server? Thanks.

lps 71 Posting Pro in Training

14 Years Ago

Firstly, please have the images upload to server instead of the localhost. We can't view the images with effect.Therefore, cannot help in detail.

I think the main reason of your problem is about the CSS. My suggestion is you install firebug plugin of firefox and use it to adjust the css.

lps 71 Posting Pro in Training

14 Years Ago

Sadly to tell you that, still, your image is in localhost which means that we cannot view your site with image as there is no images at out localhost. Please do upload the images online and change the code to link to corresponding images. Else, we can do nothing to help.

Edited 14 Years Ago by lps because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

torbatt 0 Newbie Poster · Answer 1 · 2012-03-06T02:19:12+00:00

Hi,

Can anyone help me fix the slideshow navigation ?

First, the navigation is far too far on the left.

Second, how to erase the black bullet next to the round gray button ?

Third, I would like those gray button to be on top of the slideshow just like the 3 gray picture button on top of the slideshow.

slideshow3(1).php

<html>

<style type="text/css">

#slideshow_wrap{ width: 1700px; text-align:center; position:relative;overflow:hidden; height:400px }

#slideshow { margin: 0 0 0 -200px; height: 232px; width: 232px; margin:  auto;} 
#slideshow img { padding: 15px; border: 1px solid #ccc;  background-color: #eee; } 
#nav { position: absolute; bottom:30px; left:30px; z-index:50}
#nav li{
    float: left;
    margin-right:6px;
    width: 20px;
}

#nav a {
    display: block; 
    border: 1px solid #CCCCCC; 
    border-radius: 50%; 
    width: 12px;
    height: 12px;
    background-color: green;		
	background: url(images/buttonnav.png);
	background-position:-3px -28px; 
}

#nav li.activeSlide a {
	background-color: yellow; 
	background: url(images/buttonnav.png);
	background-position: -3px -8px; 
}

</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

$(function() {

    $('#slideshow').after('<ul id="nav" />').cycle({
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"></a></li>';
        }
    });
});

</script>

<div id="slideshow_wrap">
    
    <div id="slideshow">         
        <img src="http://localhost/ocklaw/images/banner1.png"/>        
        <img src="http://localhost/ocklaw/images/banner2.png"/>         
        <img src="http://localhost/ocklaw/images/banner3.png"/>   
    </div>
    
</div>


</html>

There are no images on website
please upload images first

davy_yg 2 Posting Whiz · Answer 2 · 2012-03-07T14:21:53+00:00

davy_yg 2 Posting Whiz

14 Years Ago

hi,

I fix the link. Please recheck. Thanks.

davy_yg 2 Posting Whiz · Answer 3 · 2012-03-09T15:13:02+00:00

This is the link :

Can anyone help ?

davy_yg 2 Posting Whiz · Answer 4 · 2012-03-12T12:51:07+00:00

Check this one:

lps 71 Posting Pro in Training · Answer 5 · 2012-03-12T13:37:54+00:00

Finally, I can see the images.
First of all, to remove the bullet, add
#nav {list-style: none;}
The problem with your slide arrangement is cause by your auto margin of #slideshow joined by the over-wide #slideshow_wrap.
Sorry to tell you that I don't quite understand your third problem.

lps 71 Posting Pro in Training · Answer 6 · 2012-03-12T13:48:37+00:00

Ok, I finally get the idea on your third question. If I am not mistaken, You are trying to develop a content slider where the right hand side of the slider is a content div is it? If so, I don't see any problem to append the #nav into the content div, by using jquery.

davy_yg 2 Posting Whiz · Answer 7 · 2012-03-13T14:14:54+00:00

I don't understand, what do you mean by: append the #nav into the content div, by using jquery ?

Basically you can three bullets on the slideshow, my navigation bullets suppose to be on top of those.

How there are big distance between the navigation and the slideshow.

Slideshow Navigation

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers