<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<title>Location Card 3D Carousel JQuery</title>
<style>
/*Slider Classes*/
.cascade-slider_container {
margin: 25px auto;
padding-top: 150px;
overflow-x: hidden;
}
.cascade-slider_item {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) scale(0.3);
transition: all 1s ease;
opacity: 0;
z-index: -1;
text-align: center;
}
.cascade-slider_item.next {
left: 50%;
transform: translateY(-50%) translateX(-135%) scale(0.8);
filter: brightness(85%);
opacity: 1;
z-index: 1;
}
.cascade-slider_item.prev {
left: 50%;
transform: translateY(-50%) translateX(35%) scale(0.8);
filter: brightness(85%);
opacity: 1;
z-index: 1;
}
.cascade-slider_item.now {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) scale(1);
opacity: 1;
z-index: 5;
}
.cascade-slider_arrow {
display: inline-block;
position: absolute;
top: 50%;
cursor: pointer;
z-index: 5;
}
.cascade-slider_arrow-left {
left: 20px;
}
.cascade-slider_arrow-right {
right: 20px;
}
.cascade-slider_arrow-left img {
height: 40px;
left: 40px;
}
.cascade-slider_arrow-right img {
height: 40px;
left: 40px;
}
@media (min-width: 460px) and (max-width: 680px) {
.cascade-slider_item {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) scale(0.3);
transition: all 1s ease;
opacity: 0;
z-index: -1;
text-align: center;
}
.cascade-slider_item.next {
left: 50%;
transform: translateY(-50%) translateX(-90%) scale(0.4);
filter: brightness(70%);
opacity: 1;
z-index: 1;
}
.cascade-slider_item.prev {
left: 50%;
transform: translateY(-50%) translateX(-10%) scale(0.4);
filter: brightness(70%);
opacity: 1;
z-index: 1;
}
.cascade-slider_item.now {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) scale(0.6);
opacity: 1;
z-index: 5;
}
.cascade-slider_arrow-left img {
height: 30px;
left: 30px;
}
.cascade-slider_arrow-right img {
height: 30px;
left: 30px;
}
.cascade-slider_nav {
display:none;
}
}
@media (max-width: 460px) {
.cascade-slider_item {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) scale(0.3);
transition: all 1s ease;
opacity: 0;
z-index: -1;
text-align: center;
}
.cascade-slider_item.next {
left: 50%;
transform: translateY(-50%) translateX(-80%) scale(0.3);
filter: brightness(70%);
opacity: 1;
z-index: 1;
}
.cascade-slider_item.prev {
left: 50%;
transform: translateY(-50%) translateX(-20%) scale(0.3);
filter: brightness(70%);
opacity: 1;
z-index: 1;
}
.cascade-slider_item.now {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) scale(0.5);
opacity: 1;
z-index: 5;
}
.cascade-slider_arrow-left img {
height: 30px;
left: 30px;
}
.cascade-slider_arrow-right img {
height: 30px;
left: 30px;
}
.cascade-slider_nav {
display:none;
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="cascade-slider_container" id="cascade-slider">
<div class="cascade-slider_slides">
<div class="cascade-slider_item">
<img src="https://cdn.shopify.com/s/files/1/0571/6223/6113/files/Sylvi_Watch_Collection_Image_Homepage_Velocity.webp"/>
</div>
<div class="cascade-slider_item">
<img src="https://cdn.shopify.com/s/files/1/0571/6223/6113/files/Sylvi_Watch_Collection_Image_Homepage_Velocity.webp"/>
</div>
<div class="cascade-slider_item">
<img src="https://cdn.shopify.com/s/files/1/0571/6223/6113/files/Sylvi_Watch_Collection_Image_Homepage_Velocity.webp"/>
</div>
</div>
<span class="cascade-slider_arrow cascade-slider_arrow-left" data-action="prev"><img src="https://agenciafagulha.com.br/wp-content/uploads/2019/12/chvron-left.svg" type="image/svg+xml"></span>
<span class="cascade-slider_arrow cascade-slider_arrow-right" data-action="next"><img src="https://agenciafagulha.com.br/wp-content/uploads/2019/12/chvron-right.svg" type="image/svg+xml"></span>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
// Based on a Pen by Russell *ttps://codepen.io/Pycb/pen/wWRrjg*
//Using Jquery 'Cascade Slider jQuery Plugin' by jqueryscript.net 'https://www.jqueryscript.net/demo/Minimal-3D-Image-Rotator-with-jQuery-CSS3-Cascade-Slider/'
(function ($) {
$.fn.cascadeSlider = function (opt) {
var $this = this,
itemClass = opt.itemClass || 'cascade-slider_item',
arrowClass = opt.arrowClass || 'cascade-slider_arrow',
$item = $this.find('.' + itemClass),
$arrow = $this.find('.' + arrowClass),
itemCount = $item.length;
var defaultIndex = 0;
changeIndex(defaultIndex);
$arrow.on('click', function () {
var action = $(this).data('action'),
nowIndex = $item.index($this.find('.now'));
if (action == 'next') {
if (nowIndex == itemCount - 1) {
changeIndex(0);
} else {
changeIndex(nowIndex + 1);
}
} else if (action == 'prev') {
if (nowIndex == 0) {
changeIndex(itemCount - 1);
} else {
changeIndex(nowIndex - 1);
}
}
$('.cascade-slider_dot').removeClass('cur');
//$('.cascade-slider_dot').next().addClass('cur');
});
// add data attributes
for (var i = 0; i < itemCount; i++) {if (window.CP.shouldStopExecution(0)) break;
$('.cascade-slider_item').each(function (i) {
$(this).attr('data-slide-number', [i]);
});
}
// dots
window.CP.exitedLoop(0);$('.cascade-slider_dot').bind('click', function () {
// add class to current dot on click
$('.cascade-slider_dot').removeClass('cur');
$(this).addClass('cur');
var index = $(this).index();
$('.cascade-slider_item').removeClass('now prev next');
var slide = $('.cascade-slider_slides').find('[data-slide-number=' + index + ']');
slide.prev().addClass('prev');
slide.addClass('now');
slide.next().addClass('next');
if (slide.next().length == 0) {
$('.cascade-slider_item:first-child').addClass('next');
}
if (slide.prev().length == 0) {
$('.cascade-slider_item:last-child').addClass('prev');
}
});
function changeIndex(nowIndex) {
// clern all class
$this.find('.now').removeClass('now');
$this.find('.next').removeClass('next');
$this.find('.prev').removeClass('prev');
if (nowIndex == itemCount - 1) {
$item.eq(0).addClass('next');
}
if (nowIndex == 0) {
$item.eq(itemCount - 1).addClass('prev');
}
$item.each(function (index) {
if (index == nowIndex) {
$item.eq(index).addClass('now');
}
if (index == nowIndex + 1) {
$item.eq(index).addClass('next');
}
if (index == nowIndex - 1) {
$item.eq(index).addClass('prev');
}
});
}
};
})(jQuery);
$('#cascade-slider').cascadeSlider({
itemClass: 'cascade-slider_item',
arrowClass: 'cascade-slider_arrow' });
</script>
</body>
</html>
Comments
Post a Comment