Web component: j-MobileCarousel

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, 0 disables 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; }