I have a slider, and for some odd reason, at the very end it goes blank for a while then resets...
I think its being overwritten by my css... Can someone look at my site...
I will send you the link through a private message (I don't want to show my work yet)...
Thanks!
The ultimate point of this website is to help others. If you are unwilling to share your problem publicly, there is no real reason to help you to a solution.
I know that's the point, but I don't want to show the results just yet...
So are you able to help me?
Not unless you post your problem here. Recreate the problem in as little code as possible and paste it here. There's no need to post everything.
If you put it that, I get it...
Here is my Jquery code:
<script>
$(window).load(function() {
var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 700;
$(slideContainer).css({
'overflow':'hidden',
'position': 'relative'
});
$(slidesHolder).css({
'position': 'absolute'
});
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css({
'position': 'absolute',
'top': '0',
'left': slidePos + 'px'
});
slidePos = slidePos + slideWidth;
}
$(slidesHolder).css('width', slidePos + slideWidth);
$(slides).first().clone().css({
'left': slidePos + 'px'
}).appendTo(slidesHolder);
function animate() {
$(slidesHolder).delay(delay).animate({
left: '-=' + slideWidth
}, slideTime, function() {
if (currentSlide < slideTotal - 1) {
currentSlide++;
animate();
} else {
$(slidesHolder).css({
'left': 0
});
currentSlide = 0;
animate();
}
});
}
animate();
});
</script>
As far as I can determine from that code, it should be working. If you want me to reproduce, can you show what's in #slider_container ? I don't need everything, just one of the children, to see how it looks.
Sorry for my late response,
Here's the css:
#slider_container {
height: 408px;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
And here is the html:
<div id="slider_container">
<div id="slides">
<img src="image5.png" width="1000px" height="408px" alt="image 1" class="is-showing" />
<img src="image4.jpg" width="1000px" height="408px" alt="image 2"/>
<img src="image3.jpg" width="1000px" height="408px" alt="image 3"/>
<img src="image2.JPG" width="1000px" height="408px" alt="image 4"/>
<img src="image0.png" width="1000px" height="408px" alt="image 5"/>
<img src="1.jpg" width="1000px" height="408px" alt="image 6"/>
<img src="2.jpg" width="1000px" height="408px" alt="image 7"/>
<img src="3.jpg" width="1000px" height="408px" alt="image 8"/>
<img src="4.jpg" width="1000px" height="408px" alt="image 9"/>
<img src="5.jpg" width="1000px" height="408px" alt="image 10"/>
<img src="6.jpg" width="1000px" height="408px" alt="image 11"/>
<img src="7.png" width="1000px" height="408px" alt="image 12"/>
<img src="8.jpg" width="1000px" height="408px" alt="image 13"/>
<img src="9.jpg" width="1000px" height="408px" alt="image 15"/>
<img src="10.jpg" width="1000px" height="408px" alt="image 16"/>
<img src="11.jpg" width="1000px" height="408px" alt="image 17"/>
<img src="12.jpg" width="1000px" height="408px" alt="image 18"/>
<img src="13.jpg" width="1000px" height="408px" alt="image 19"/>
<img src="14.jpg" width="1000px" height="408px" alt="image 20"/>
<img src="15.jpg" width="1000px" height="408px" alt="image 21"/>
<img src="16.jpg" width="1000px" height="408px" alt="image 22"/>
<img src="17.jpg" width="1000px" height="408px" alt="image 23"/>
<img src="18.jpg" width="1000px" height="408px" alt="image 24"/>
</div>
</div>
I'm not sure if anything is wrong with the html, it could be a problem of me having a missing css styling or something like that...
I'm not sure if anything is wrong with the html,
That's not why I asked. With the HTML now, the jQuery part makes more sense, and I'll hopefully be able to reproduce it.
That's awesome, did you manage to see what was the flaw?
I've used only 3 slides, but it works fine in Opera and IE. This is the code I used:
<!doctype html>
<html>
<head>
<style>
#slider_container {
height: 408px;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<div id="slider_container">
<div id="slides">
<img src="image2.jpg" width="1000px" height="408px" alt="image 1" class="is-showing" />
<img src="image3.jpg" width="1000px" height="408px" alt="image 2" />
<img src="image4.jpg" width="1000px" height="408px" alt="image 3" />
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).load(function() {
var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 700;
$(slideContainer).css({
'overflow':'hidden',
'position': 'relative'
});
$(slidesHolder).css({
'position': 'absolute'
});
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css({
'position': 'absolute',
'top': '0',
'left': slidePos + 'px'
});
slidePos = slidePos + slideWidth;
}
$(slidesHolder).css('width', slidePos + slideWidth);
$(slides).first().clone().css({
'left': slidePos + 'px'
}).appendTo(slidesHolder);
function animate() {
$(slidesHolder).delay(delay).animate({
left: '-=' + slideWidth
}, slideTime, function() {
if (currentSlide < slideTotal - 1) {
currentSlide++;
animate();
} else {
$(slidesHolder).css({
'left': 0
});
currentSlide = 0;
animate();
}
});
}
animate();
});
</script>
</body>
</html>
so it works with 3 images, but how come it doesn't work when i have over 20 images...? could be because my site is overrunning it?
Shall i send you the link so you can see?
I can't think of any reason why it would stop working. Only perhaps an invalid/unclosed tag, or a filename that's not entirely correct.
Sorry pritaeas, I got it to work.... for some odd reason... I can't have too many pictures...
Thanks for helping out!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.