Hi Greensock!
Please, help me!
I want create circular slider with z-index. Еoday turned out to make the slider in one direction, but i dont't know how make circular.
<div class="carousel_layout">
<div class="carousel_layout-item active">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
<div class="carousel_layout-item">
<div class="carousel_layout-bg">
<img src="img/bg/stairs.jpg" alt="">
</div>
<div class="carousel_layout-text"></div>
</div>
</div>
(function(){
var $activeSlide = $('.active'),
$slide = $('.carousel_layout-item'),
$visibleSlide = $(':nth-child(-n+3)'),
$layout = $('.carousel_layout'),
$btnNext = $('.carousel_layout-next');
function initProjects() {
TweenLite.set($slide.not($visibleSlide), {
autoAlpha: 0
});
var tl = new TimelineLite();
tl
.set($('.carousel_layout-item.active'), {x: '0', rotationY: 13, transformOrigin:"left 50%"})
.set($('.carousel_layout-item.active').next(), {x: '-7%', scaleX:0.92, scaleY:0.92, rotationY: 13, transformOrigin:"left 50%"})
.set($('.carousel_layout-item.active').next().next(), {x: '-13%', scaleX:0.85, scaleY:0.85, rotationY: 13, transformOrigin:"left 50%"})
.set($('.carousel_layout-item.active').next().next().next(), {x: '-13%', scaleX:0.85, scaleY:0.85, rotationY: 13, transformOrigin:"left 50%"})
};
initProjects();
function refreshSlide(current, prev, prevPrev, prevPrevPrev) {
var tl = new TimelineLite();
tl
.set(current, {x: '0', autoAlpha: 1, scaleX: 1, scaleY: 1, className: '-=active', zIndex: 3})
.set(prev, {x: '-7%', scaleX: 0.92, scaleY: 0.92, className: '+=active', zIndex: 2})
.set(prevPrev, {x: '-13%', scaleX: 0.85, scaleY: 0.85, zIndex: 1})
.set(prevPrevPrev, {autoAlpha: 0, x: '-13%', scaleX:0.85, scaleY:0.85, rotationY: 13, transformOrigin:"left 50%"})
.to(current, 0.5, {x: '0', autoAlpha: 0, scaleX: 1.1, scaleY: 1.1, ease:Power3.easeInOut}, 0)
.to(prev, 0.5, {x: '+=7%', scaleX: 1, scaleY: 1, ease:Power3.easeInOut}, 0)
.to(prevPrev, 0.5, {x: '+=6%', scaleX: 0.92, scaleY: 0.92, ease:Power3.easeInOut}, 0)
.to(prevPrevPrev, 0.5, {autoAlpha: 1, ease:Power3.easeInOut}, 0)
}
$btnNext.on('click', function(e){
e.preventDefault();
//if($(this).hasClass('animate')) return false;
//$(this).addClass('animate');
var current = $('.carousel_layout').find('.active'),
prev = current.next(),
prevPrev = prev.next(),
prevPrevPrev = prevPrev.next(),
length = $('.carousel_layout').find('.carousel_layout-item').length;
refreshSlide(current, prev, prevPrev, prevPrevPrev)
});
})();
Thanks!
https://jsfiddle.net/fqamphod/2/