Question

Implementing slides.js on our site, I seem to have somehow caused the actual sliding animation to quit working. The slides/images will change, but with no accompanying animation. If I specify the ‘fade’ anmiation, then that works, but unfortuantely specifiying ‘slide’ doesn’t have the same effect. I am using jquery 1.8.0, no idea if that has something to do with it, but I seem to have the same problems with older versions of jquery.

Here’s an example of what I mean: http://jsfiddle.net/x45fE/1/

From the fiddle, Html:

<script type="text/javascript" src="http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js"></script>

<div id="bannerSlider">
    <div class="slides_container">
            <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200/ffffff/">
                    </a>
            </div>
                    <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200x200">
                    </a>
            </div>

                    <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200/ffffff/">
                    </a>
            </div>

                    <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200x200">
                    </a>
            </div>

    </div>                    
</div>test

css:

#ribbon {
    position:absolute;
    top:-3px;
    left:-15px;
    z-index:500;
}

#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}

/*
    Slideshow
*/

#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width:570px;
    overflow:hidden;
    position:relative;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container div.slide {
    /*width:570px;*/
    /*height:270px;*/
    display:block;
}

/*
    Next/prev buttons
*/

#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:-39px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:585px;
}

/*
    Pagination
*/

.pagination {
    margin:5px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

/*
    Caption
*/

.caption {
    z-index:500;
    position:absolute;
    bottom:-35px;
    left:0;
    height:30px;
    padding:5px 20px 0 20px;
    background:#000;
    background:rgba(0,0,0,.5);
    width:540px;
    font-size:1.3em;
    line-height:1.33;
    color:#fff;
    border-top:1px solid #000;
    text-shadow:none;
}
#bannerSlider {
    float:left;
    width:200px;
    padding:5px;
    background:#fff;
    border:1px solid #ccc;
}

#bannerSlider div.slide {
    height: 200px;
}

javascript:

jQuery(function() {
    jQuery('#bannerSlider').slides({
        play: 2000

    });
});

I’d appreciate any feedback into this, I’ve been tearing my hair out for the past hour. Thanks!

Answer 1

You need to comment out the following part of your CSS

.slides_container {
    width:570px;
    overflow:hidden;
    position:relative;
    display:none;
}