Question

I am looking for a jQuery carousel similar to the one on Blizzard’s homepage where it is centered, does not display the horizontal scroll bars even though the carousel’s content is outside of the browser’s width, supports image crossfading, and includes pagination.

I have played with SlidesJS and carouFredSel but these carousels are not compatable. After spending hours testing, I realized it is because these plug-ins rely on a having a fixed width for the container which causes the horizontal scroll bars to appear when the carousel is wider then the browser width.

I am wondering if there is a carousel that uses a similar code structure, and embeds the image as the background of the div via CSS:

<div id="carousel">
  <div class="slide">
    <div class="content">Slide01</div>
  </div>
  <div class="slide">
    <div class="content">Slide02</div>
  </div>
  <div class="slide">
    <div class="content">Slide03</div>
  </div>
</div>

.carousel {
  margin: 0 auto;
}

.slide {}

.content {
  background: url(http://www.placehold.it/1200x500 center top no-repeat;
  min-width: 960px;
  height: 500px;
}

Answer 1

for one, the blizzard slider is flash based. to get this to work with jquery you will have to do a jquery function to trigger on resize to get window width:

$(window).resize(function(){
       var w = $(window).width(); 
       $('#sliderContainer').css({width: w});
});