Slider Goes Blank

[<M/>]

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!

[pritaeas]

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.

[<M/>]

I know that's the point, but I don't want to show the results just yet...

So are you able to help me?

[pritaeas]

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.

[<M/>]

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>

[pritaeas]

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.

[<M/>]

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...

[pritaeas]

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.

[<M/>]

That's awesome, did you manage to see what was the flaw?

[pritaeas]

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>

[<M/>]

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?

[pritaeas]

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.

[<M/>]

Sorry pritaeas, I got it to work.... for some odd reason... I can't have too many pictures...

Thanks for helping out!