j-MobileCarousel
Works only with Bootstrap grid system and in mobile devices
xs.
Configuration:
count{Number} count visible items (default:1)selector{String} jQuery selector (default:.col-sm-4)margin{Number} left margin between items (default:15)snapping{Boolean} allows snapping (default:true)animate{Number} animation timeout,0disables animation (default:5000)
</> HTML
<style>
.m { margin-bottom: 20px; }
.bg { padding: 10px; background-color: #F0F0F0; }
</style>
<div data-jc="mobilecarousel__null__selector:.col-sm-3">
<div class="row">
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
<div class="col-sm-3 m">
<div class="bg">
<h2>Title 7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
</div>
</div>
</div>
</div>
-----------------------------------------------------------------------------------------------------
</> JS
COMPONENT('mobilecarousel', 'count:1;selector:.col-sm-4;margin:15;snapping:true;animate:5000', function(self, config) {
var width = 0;
var count = 0;
var index = 0;
var increment = 1;
var skip = false;
var move = false;
var anim;
var container;
var old;
self.readonly();
self.blind();
self.make = function() {
self.element.wrapInner('<div class="ui-mobilecarousel-container"><div class="ui-mobilecarousel-body"></div></div>');
$(window).on('resize', self.resize);
setTimeout(self.resize, 50);
setTimeout(self.resize, 500);
setTimeout(self.resize, 2000);
CSS('.ui-mobilecarousel .ui-mobilecarousel-{0} {1}{margin:0 0 0 {2}px;padding:0;float:left;vertical-align:top;display:inline-block}.ui-mobilecarousel .ui-mobilecarousel-{0} {1}:first-child{margin-left:0}'.format(self.id, config.selector, config.margin));
container = self.find('.ui-mobilecarousel-container').aclass('ui-mobilecarousel-' + self.id);
config.snapping && container.on('scroll', function() {
!skip && setTimeout2(self.id, self.snap, 200);
}).on('touchmove', function() {
clearTimeout(anim);
});
config.animate && (anim = setTimeout(self.animate, config.animate));
};
self.animate = function() {
if (!count || move)
return;
index += increment;
if (index === count - 1)
increment = -1;
else if (index === 0)
increment = 1;
skip = true;
anim = true;
container.animate({ scrollLeft: index * (width + config.margin) }, 200);
setTimeout(function() {
skip = false;
anim = false;
}, 400);
anim = setTimeout(self.animate, 2000);
};
self.snap = function() {
var x = container.prop('scrollLeft');
var off = Math.round(x / width);
skip = true;
move = true;
container.stop().animate({ scrollLeft: off * (width + config.margin) }, 200);
setTimeout(function() {
skip = false;
}, 500);
};
self.resize = function() {
if (WIDTH() !== 'xs') {
if (old === '1')
return;
old = '1';
count = 0;
width = 0;
self.rclass('ui-mobilecarousel');
self.css('height', '');
self.find('.ui-mobilecarousel-body').css('width', '');
self.find(config.selector).css('width', '');
return;
}
self.aclass('ui-mobilecarousel');
self.width(function(w) {
var sum = 0;
var height = 0;
width = w / config.count;
count = 0;
self.find(config.selector).each(function(index) {
var el = $(this);
sum += width + (index ? 15 : 0);
height = Math.max(el.innerHeight(), height);
el.css('width', width);
count++;
});
var k = sum + 'x' + height;
if (old === k)
return;
old = k;
self.css('height', (height >> 0) + 15);
self.find('.ui-mobilecarousel-body').css('width', sum);
});
};
});
----------------------------------------------------------------------------------
</> CSS
.ui-mobilecarousel { overflow: hidden; visibility: visible; }
.ui-mobilecarousel .ui-mobilecarousel-container { width: 100%; overflow-x: scroll; overflow-y: hidden; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; }
.ui-mobilecarousel .ui-mobilecarousel-body { padding-bottom: 30px; }
.ui-mobilecarousel .row { margin: 0; }
