Слайдер Javascript, Как назначить максимальное значение для прокрутки, чтобы оно не переполнялось?

Question

Слайдер Javascript, Как назначить максимальное значение для прокрутки, чтобы оно не переполнялось?

0

Я хочу установить минимальное и максимальное значение для прокрутки таким образом, чтобы не было возможности прокручиваться за пределы содержимого внутри слайдера. Прямо сейчас код позволяет бесконечную прокрутку. Я новичок в Javascript, но уже несколько лет программирую в университете.

JSFiddle

JavaScript

$('#vcards').width(function(){
var width = 0;                
$('.vcard').each(function(){
    width += $(this).outerWidth(true);
});
return width;
}());
$('#next').on('click',function(){
$('#vcards').animate({left : "-=170"});
});
$('#prev').on('click',function(){
$('#vcards').animate({left : "+=170"});
});

CSS

#slider{
width:500px;
overflow:hidden;
position:relative;
border:1px solid black;
height:225px;
padding:10px;
}  

.vcard{
width:150px;
margin: 0 10px;
height:200px;
float:left;
border:1px;
text-align:center;
font-weight:bold;
background-color:green;
}  

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

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>
<div id="prev">Prev</div>

user3001020 07 янв. 2014, в 18:38

Источник

Теги:

javascript

jquery

css

slider

1 ответ

Ещё вопросы

cretzzzu3000 · Answer 1 · 2014-01-07T15-45-00.000Z

Вы можете попробовать следующее:

$('#next').on('click',function(){
    var v_offset = $('#vcards').offset();
    var v_width = $('#vcards').width();
    var left = v_offset.left;
    var total = v_width - Math.abs(left);
    var cont_w = $('#slider').width();
    if(total>=cont_w)
    $('#vcards').animate({left : "-=170"});
    });

$('#prev').on('click',function(){
    var v_offset = $('#vcards').offset();
    var left = v_offset.left;
    if(left<=0)
    $('#vcards').animate({left : "+=170"});
    });