Infinite gallery with multiple visible images

StackOverflow https://stackoverflow.com/questions/13215854

  •  30-07-2021
  •  | 
  •  

Question

I'm looking to create something like the following has on top of their site.

http://www.vogue.com/

The auto-scrolling slideshow that has multiple images shown. (1, 2, 3) then (2, 3, 4). It cycles through them eventually depending on how many there are. Each image is also in a separate div, where I believe the overlay is being placed for the two outside images that aren't being focused.

I'm not that well versed in javascript to create something like this myself from scratch, and haven't found a jquery slideshow that allows for the multiple images to be seen at a given time. The closest I've found is a plugin that scrolls through 3 images at a time, and didn't auto-scroll.

Does anyone know how this would be easily accomplished with the given specs? I need it to perform pretty much how it does on the vogue site. Thanks in advance.

Was it helpful?

Solution

jsBin demo

jQuery:

// infinite Gallery - script by roXon, design idea by "Vogue(R)"
$(function(){


    var c = 0;        // COUNTER // SET HERE DESIRED START SLIDE NUMBER (zero based)
    var speed = 300;    // ANIMATION SPEED
    var pause = 3500;   // ANIMATION PAUSE
    var $slider = $('.carousel-slider');
    var $sli = $slider.find('.carousel-content');
    var $btns = $('#btn-left, #btn-right');

    /* DO NOT EDIT BELOW */
    var sliN = $sli.length;
    $('.carousel').clone().appendTo( $('.carousel:gt(0)') ); /*CLONE SLIDERS*/
    var m = 0;
    var w = $slider.closest('div').width();
    var intv;
    $slider = $('.carousel-slider'); // all
    $slider.width(w*2);
    // rearrange
    $slider.eq(0).find('.carousel-content:lt('+(c)+')').appendTo( $slider.eq(0) );
    $slider.eq(1).find('.carousel-content:lt('+(c-1)+')').appendTo( $slider.eq(1) );
    $slider.eq(2).find('.carousel-content:gt('+(c)+')').prependTo(  $slider.eq(2) );

    // POPULATE WITH NAVIGATION BUTTONS
    for(i=0;i<sliN;i++){
        $('#nav-btns p').append(' <a href="#">'+ (i+1) +'</a> ');
    }

    // TOGGLE ACTIVE CLASS TO NAV BUTTON
    function navBtnsActive(){
        c = c===-1 ? sliN-1 : c%sliN ;  // counter resets
        $('#nav-btns a').removeClass('btn-active').eq(c).addClass('btn-active'); // nav buttons actives
    }
    navBtnsActive();

    var $lastCont;
    function anim(){
        if(c>m){ // right btn
            $slider.animate({left:-w}, speed, 'linear', function(){
                $(this).css({left:0}).find('.carousel-content:first').appendTo( $(this) );
            });
            m++;
        }else if(c<m){ // left btn  
            $slider.animate({left:-w},0,function(){
                $lastCont = $(this).find('.carousel-content:last');
                $(this).find('.carousel-content:last').prependTo( $(this) );
            }).animate({left:0}, speed, 'linear');
            m--;
        }
        if(c!=m){anim();} // loop until match
    }

    // LEFT-RIGHT BUTTONS //
    $btns.on('click',function(){
        if(!$slider.is(':animated')){
            var btnID = this.id=='btn-right' ? c++ : c-- ;
            anim();
            navBtnsActive();
            m=c;
        }
    });

    // NAV BUTTONS //
    $('#nav-btns a').on('click',function(e){
        e.preventDefault(); 
        c = $(this).index();
        anim(); 
        navBtnsActive();
    });

    // AUTO SLIDE
    function auto(){
        clearInterval(intv);
        intv = setInterval(function(){
            $('#btn-right').click();
        }, pause);
    }
    auto(); // start!

    // PAUSE ON HOVER //
    $('#gallery').on('mouseenter mouseleave',function( e ){
        var mEnt = e.type=='mouseenter',
            aSli = mEnt?clearInterval(intv):auto();
        $btns.stop().fadeTo(300,mEnt?1:0);
    });

});

HTML:

  <div id="document_wrapper">

    <div id="container">
      
        <h1 class="title">BLOGUE</h1>
        
        <div id="top-nav"></div>
        
        <div id="gallery"> <!-- OUR PRECIOUS :) -->

            <div class="carousel carousel-center">
                <div class="carousel-slider">
              
                    <div class="carousel-content">
                                         <!-- organize your content here -->
                    </div>
                    <!-- use more .carousel-content here -->
                
                </div>
            </div>
            
            <div class="carousel carousel-left"></div>
            <div class="carousel carousel-right"></div>
        
            <div id="btn-left"></div>
            <div id="btn-right"></div>
            
            <div id="nav-btns"><p></p></div>

        </div>
        
        
            <!-- document content here -->
      
    </div>
    
</div>

CSS:

*{margin:0;padding:0;} /* UGLY RESET */
body{
    font:14px/24px "Myriad Pro","Trebuchet MS",sans-serif;
    background:#F2EFED;
    color:#555;
}
#document_wrapper{
    position:relative;
    overflow:hidden;
}

h1.title{
    font-family:"Times New Roman",Times,serif;
    font-size:14.16em;
    line-height:0.6em;
    font-weight:normal;
    letter-spacing:10px;
    color:#000;
    position:relative;
    z-index:1;
    top:70px;
}


#container{
    position:relative;
    margin:0px auto;
    width:980px;
    padding-bottom:70px;
    height:1000px;
    background:#fff;
}
#top-nav{
    border-top:1px solid #000;
    position:relative;
    z-index:2;
    background:#fff;
    height:36px;
    width:100%;
}



/* GALLERY */

#gallery{
    height:400px;
    width:100%;
    position:relative;
    left:0px;
    padding-bottom:36px; /* FOR NAV BUTTONS HEIGHT */
}
.carousel{
    background:#147;
    position:absolute;
    margin-left:-10px;
    width:850px;
    height:400px;
    border-left:10px solid #fff;
    border-right:10px solid #fff;
    overflow:hidden;
}
.carousel-left, .carousel-right{
  opacity:0.2;
}
.carousel-left{
    left:-860px;
}
.carousel-right{
    left:860px;
}
.carousel-slider{
    height:400px;
    position:absolute;
    left:0;
}
.carousel-content{
    position:relative;
    margin-left:-10px;
    float:left;
    width:850px;
    height:400px;
    border-left:10px solid #fff;
    border-right:10px solid #fff;
}
/* BUTTONS */
#btn-left, #btn-right{
    position:absolute;
    background:#fff;
    width:25px;
    height:150px;
    top:125px;
    display:none;
    cursor:pointer;
}
#btn-right{
    right:130px;
}
/**/
#nav-btns{
    position:relative;
    top:400px;
    height:30px;
    width:850px;
}
#nav-btns{
    text-align:right;
}
#nav-btns a{
    font-style:italic;
    text-decoration:none;
    color:#888;
    padding:0 8px;
    margin:0 !important;
}
#nav-btns a.btn-active{
    border-top:10px solid #fff;
    text-decoration:none;
    color:#000;
}
#nav-btns a:hover{
    color:#000;
}

OTHER TIPS

fiddle attached,

Minor code refactoring and optimisations can be done but the general idea is the same.

(function($) {
  var $slider = $('#slider'),
    finalOffset = '-' + $slider.children().last().offset().left + 'px';
    slideSpeed = 5000,
    timer = -1;

  function startSlide() {
    $slider.children().first().animate({
        'margin-left' : finalOffset            
    }, slideSpeed, function() {
        $slider.children().first().animate({'margin-left' : '0px'}, slideSpeed, function() {
            startSlide();
        });
    });   
}

startSlide();
}(jQuery));​

cheers

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top