<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="carusel">
<div class="carusel-slides">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
<div class="pager">
<a href="#preview" class="preview" onclick="moveCarusel('preview');"><< Preview</a>
<a href="#next" class="next" onclick="moveCarusel('next');">Next >></a>
</div>
.carusel{
width: 100%;
height: 198px;
overflow: hidden;
background: black;
}
.pager{
max-width: 320px;
margin: 0 auto;
}
.carusel-slides{
width: 100%;
height: 100%;
position: relative;
left: 0px;
display: inline-block;
}
.carusel-slides:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.row{
display: inline-block;
width: 184px;
height: calc(100% - 8px);
float: left;
margin: auto 8px;
border: 2px solid white;
background: darkblue;
}
.row:nth-child(even){
background: #003D80;
}
var carusel_slides = 0;
var slide_average_width = 0;
var carusel_increase_pager = 0;
$(document).ready(function(){
$('.carusel-slides .row').each(function(i, obj){
carusel_slides += $(this).outerWidth(true);
});
slide_average_width = carusel_slides / $('.carusel-slides .row').size();
carusel_increase_pager = getFixIncreaseCarousel();
console.debug(carusel_increase_pager);
$('.carusel-slides').width(carusel_slides);
});
$(window).bind("resize", maxRCarousel);
function getFixIncreaseCarousel(){
var increase = Math.floor($(".carusel").width() / slide_average_width);
increase = (increase < 1 ? 1 : increase);
return increase * slide_average_width;
}
function maxRCarousel(){
carusel_increase_pager = getFixIncreaseCarousel();
$('.carusel-slides').css('left', 0);
//console.debug(carusel_increase_pager);
}
function moveCarusel(action){
var action_operator = (action == 'next' ? -1 : 1);
var status = Number($('.carusel-slides').css('left').replace('px',''));
var next = (status * action_operator) + (carusel_increase_pager)
next = next * action_operator;
console.debug('s = ' + status);
console.debug('nt = ' + next);
console.debug('cs = ' + carusel_slides);
console.debug(carusel_increase_pager);
if(
next > 0
&&
action_operator > 0
){
$('.carusel-slides').animate(
{left : -(carusel_slides - carusel_increase_pager)}, 1500);
}else if(action == 'next' && next <= (carusel_slides *-1) ){
$('.carusel-slides').animate({left : 0}, 1500);
}else{
$('.carusel-slides').animate({left : next}, 1500);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.