// Card Slider - Content/CardSliderAssets.html $('#cs{data.uid}').carousel({ interval: 10000 }) $('#cs{data.uid}').on('slide.bs.carousel', function (e) { var $e = $(e.relatedTarget), itemsPerSlide = {visibleCards}, totalItems = $('.carousel-item', this).length, $itemsContainer = $('.carousel-inner', this), it = itemsPerSlide - (totalItems - $e.index()); if (it > 0) { for (var i = 0; i < it; i++) { $('.carousel-item', this).eq(e.direction == "left" ? i : 0).appendTo($itemsContainer); } } }); @media (min-width:768px){.carousel.card-slider .carousel-inner .active{display:block}.carousel.card-slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left){transition:none}.carousel.card-slider .carousel-inner .carousel-item-next,.carousel.card-slider .carousel-inner .carousel-item-prev{position:relative;transform:translate3d(0,0,0)}.carousel.card-slider .carousel-inner .active.carousel-item+.carousel-item{position:absolute;top:0;right:-100%;z-index:-1;display:block;visibility:visible}.carousel.card-slider .active.carousel-item-left,.carousel.card-slider .carousel-item-next.carousel-item-left{position:relative;transform:translate3d(-100%,0,0);visibility:visible}.carousel.card-slider .carousel-inner .carousel-item-prev.carousel-item-right{position:absolute;top:0;left:0;z-index:-1;display:block;visibility:visible}.carousel.card-slider .active.carousel-item-right+.carousel-item-prev.carousel-item-right,.carousel.card-slider .carousel-item-prev.carousel-item-right{position:relative;transform:translate3d(100%,0,0);visibility:visible;display:block;visibility:visible}} @media (min-width: 768px) { #cs{data.uid} .carousel-inner .carousel-item { margin-right: inherit; } #cs{data.uid} .carousel-inner .active {cssClass},{cssClass} + .carousel-item { display: block; } #cs{data.uid} .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) {cssClass},{cssClass} + .carousel-item { transition: none; } #cs{data.uid} .carousel-inner .carousel-item-next, #cs{data.uid} .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } #cs{data.uid} .carousel-inner .carousel-item.active + .carousel-item { position: absolute; top: 0; right: calc(-100% / {visibleCards}); z-index: -1; display: block; visibility: visible; } #cs{data.uid} .carousel-item-next.carousel-item-left + .carousel-item #cs{data.uid} .active.carousel-item-left + .carousel-item-next.carousel-item-left, {cssClass},{cssClass} + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } #cs{data.uid} .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } #cs{data.uid} .carousel-item-prev.carousel-item-right + .carousel-item #cs{data.uid} .active.carousel-item-right + .carousel-item-prev.carousel-item-right, {cssClass},{cssClass} + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } }