CODEWITHSUNDEEP
jqueryuislider
MCGRAW
MCGRAW

Reputation: 817

jQuery Slider Overflow Visibility

I have a jQuery slider that displays 'user cards' - the current implementation has a horizontal draggable scroll bar that displays the full width of the div containing all the users cards. What I want is a div that allows the user to see a portion of the previous card and the same portion of the following card (see image attachment) Upon sliding a jump-to animation will show the desired card with the same portions of the next and previous cards- I can handle the animation but Im stumped on how to achieve the visual effect of the attached image. Any help would be greatly appreciated. default view onLoad of page

Upvotes: 1

Views: 2809

Answers (3)

sabithpocker
sabithpocker

Reputation: 15566

I have just made a fiddle for the part that allows the user to see a portion of the previous card and the same portion of the following card, you can add slider and animation logics,

http://jsfiddle.net/q4Yjh/

HTML

<div id="slider">
<div id="vcards">
    <div class="vcard">1</div>
    <div class="vcard">2</div>
    <div class="vcard">3</div>
    <div class="vcard">4</div>
    <div class="vcard">5</div>
</div>
</div>
<div id="next">Next</div>

CSS

#slider{
width:200px;
overflow:hidden;//remove overflow to see the actual logic
position:relative;
border:1px solid black;
height:100px;
}  

.vcard{
width:100px;
margin: 0 10px;
background-color:red;
height:100px;
float:left;
border:1px solid yellow;
}  

#vcards{
position:absolute;
top:0;
left:40px;
}

JQUERY

$('#vcards').width(function(){
    var width = 0;                
    $('.vcard').each(function(){
        width += $(this).outerWidth(true);
    });
    return width;
}());
//set the width to contain all vcards 
//in a single horizontal strip
$('#next').on('click',function(){
    $('#vcards').animate({left : "-=122"});
    });

Upvotes: 2

chadpeppers
chadpeppers

Reputation: 2057

You will need to use a slider of some sort like jquery cycle. Then you will need to build divs that will contain these elements and hide any excess. This will allow you to only display part of the card because the overflow is hidden.

<div class="wrapper" style="width:1200px; overflow: hidden">
  <div class="slider">
    <img class="img-1" src="" />
  </div>

  <div class="slider">
    <img class="img-2" src="" />
  </div>
</div>

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

The content element (div or whatever) that holds the "cards" would be wide enough to hold all the card elements. The viewport, would be a fixed width. The content element would be nested inside the viewport element and would have its absolute positioning change in response to some sort of back/forward button elements.

There are any number of jquery plugins that do this sort of thing including the great jquery Tools library which has the scrollable plugin.

Upvotes: 0

Related Questions