var carousels = $('.carousel'); carousels.each(function() { var $obj = $(this); var $inner = $obj.find('.carousel-inner'); var id = 'uuid' + new date().gettime(); $obj.addclass(id); if ($obj.data('shift') === 1) { var items = $obj.find('.item > [class*="col-"]'), visiblecnt = $obj.find('.item:first [class*="col-"]').length, wrapper = ""; // build styles var rule_base = '.carousel.' + id + ' .carousel-inner > .item', styles = $(''), rules = []; rules[0] = rule_base + '.next {left: ' + (100 / visiblecnt) + '%; transform: none;}'; rules[1] = rule_base + '.active {left: 0;}'; rules[2] = rule_base + '.active.left {left: -' + (100 / visiblecnt) + '%; transform: none;}'; rules[3] = rule_base + '.next.left {left: 0;}'; rules[4] = rule_base + '.active.right {left: ' + (100 / visiblecnt) + '%; transform: none;}'; rules[5] = rule_base + '.prev.right {left: 0;}'; rules[6] = rule_base + '.prev {left: -' + (100 / visiblecnt) + '%; transform: none;}'; for (var i = 0; i < rules.length; i++) { styles.append(rules[i]); } $obj.prepend(styles); // rebuild items for (var i = 0; i < $(items).length; i++) { var $item = $(items[i]); var parent = $item.parent(); if (parent.hasclass('item')) { if (!wrapper.length) { wrapper = parent.clone().removeclass('active').html(''); } $item.unwrap(); } var itemgroup = [$item]; for (var x = 1; x < visiblecnt; x++) { var a = i + x; var next = $(items[a]); if (!next.length) { next = $(items[(a - $(items).length)]); } itemgroup[x] = next.clone(); } var newset = wrapper.clone().html(itemgroup); if (i == 0) { newset.addclass('active'); } newset.appendto($inner); } } });