Wednesday, 21 August 2013

width() issue in jQuery Slideshow while switching

width() issue in jQuery Slideshow while switching

So I found nice example on internet to make a jQuery Slideshow, I've made
everything properly and checked with final prduct the only thing I've
changed was width and height in css. And now when slides <li></li> are
switching a 1px gap appears to the rgiht of slide and then when next slide
is fully visible, the image stretches and gap disappears.
By the way what is the easiet way to make "circles" that show how many
slides are there and use them as navigation aswell?
I use follwoing HTML:
<div id="slideshow">
<ul id="nav">
<li id="prev"><a href="#">Förra</a></li>
<li id="next"><a href="#">Nästa</a></li>
</ul>
<ul id="slides">
<li><img src="image-1.jpg" width="950" height="390" alt="Image 1"
/></li>
<li><img src="image-2.jpg" width="950" height="390" alt="Image 2"
/></li>
<li><img src="image-3.jpg" width="950" height="390" alt="Image 3"
/></li>
</ul>
</div>
CSS:
div#slideshow {
position: relative;
width: 950px;
height: 390px;
overflow: scroll;
z-index: 5;
}
div#slideshow ul#nav {
position: relative;
display: none;
list-style: none;
top: 150px;
z-index: 15;
}
div#slideshow ul#nav li#prev {
float: left;
margin: 0 0 0 50px;
}
div#slideshow ul#nav li#next {
float: right;
margin: 0 50px 0 0;
}
div#slideshow ul#nav li a {
display: block;
width: 80px;
height: 80px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: center;
}
div#slideshow ul#nav li#prev a {
background-image: url("img/slider_prev.png");
}
div#slideshow ul#nav li#next a {
background-image: url("img/slider_next.png");
}
div#slideshow ul#slides {
list-style: none;
}
div#slideshow ul#slides li {
width: 950px;
}
div#slideshow ul#slides li img {
width: 950px;
}
jQuery: (together with jquery.cycle.all.min.js)
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 5,
prev: '#prev',
next: '#next'
});
$("#slideshow").hover(function() {
$("ul#nav").fadeIn();
},
function() {
$("ul#nav").fadeOut();
});
});

No comments:

Post a Comment