Variable Visions

Articles jQuery jQuery-Slideshow-with-CSS-transitions


tutorials - jQuery and Web-Development.

jQuery Slideshow with CSS transitions

Published Mon. May. 21, 2012


A jQuery Slidesow with a garage door caption upon image load.

I used jQuery and CSS to create this slideshow with a caption box that rises upon the slide image loading. Upon hover, the css transitions slowly reveal more content below. It even works, without the smooth transitions, in IE.



jQuery

<script type="text/javascript">
        jQuery(function(){
                       
        jQuery('#slides').slides({
                preload: true,
                preloadImage: './images/loading.gif',
                play: 5000,
                effect: 'slide',
                slideSpeed: 500,
                slideEasing: 'easeInOutSine',
                fadeSpeed: 1000,
                crossfade: true,
                pause: 2500,
                hoverPause: true,

                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-135
                    },100);
                    if (window.console && console.log) {
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });

 

 

CSS


#slides {
    position:absolute;
    z-index:100;
}
#slides img{
    width: 100%;
}
.slides_container {
    width:940px;
    overflow:hidden;
    position:relative;
    display:none;
}
.slides_container div.slide {
    width:940px;
    height:270px;
    display:block;
}
#slides .next,#slides .prev {
    position:absolute;
    top:100px;
    right:-24px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}
#slides .next {
    left: -23px;
}
.pagination {
    display: none;   
}
.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(../images/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}
.pagination li.current a {
    background-position:0 -12px;
}
.caption {
    z-index:500;
    position:absolute;
    bottom:-65px;
    left:0;
    padding:5px 20px 0 20px;
    background:#000;
    background:rgba(0,0,0,.5);
    width:100%;
    font-size:1.3em;
    line-height:1.33;
    color:#fff;
    text-shadow:none;
    height: 60px;
    -moz-transition-duration: 4.5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 4.5s;
      -o-transition-property: all;
    -o-transition-duration: 4.5s;
}
.caption:hover {
    height: 120px;   
    -moz-transition-duration: 4.5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 4.5s;
      -o-transition-property: all;
    -o-transition-duration: 4.5s;
}
.slide img{
    margin-top: -110px;   
    -moz-transition-duration: 14.5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 14.5s;
      -o-transition-property: all;
    -o-transition-duration: 14.5s;
}
.slide:hover img{
    -moz-transition-duration: 14.5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 14.5s;
      -o-transition-property: all;
    -o-transition-duration: 14.5s;
}

 

 

  
               
HTML

<div id="slides">
          <div class="slides_container">
                <div class="slide">
                        <a href="/" target="_blank"><img src="http://www.variablevisions.com/images/harley-ad-accessories.jpg" alt="Slide 6"></a>
                        <div class="caption">
                            <p>Slide 1</p>
                            <p>I now use only the iPhone for taking photos.</p>
                        </div>
                    </div>

                    <div class="slide">
                        <a href="/" target="_blank"><img src="http://www.variablevisions.com/images/flower-sun-closed.jpg" alt="Slide 6"></a>
                        <div class="caption">
                            <p>Slide 2</p>
                            <p>Some sample code to share.</p>
                        </div>
                    </div>
                </div>
                <a href="#" class="prev"><img src="./images/arrow-next.png" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="./images/arrow-prev.png" width="24" height="43" alt="Arrow Next"></a>
            </div>
           
        </div>
       
       
       


Tag(s): jQuery, CSS3 transitions, animate, garage door technique