sweelemk

Thanks, Carl for yours idea, but this variant doesn't approach for me. May be you know some turnkey solutions or you know any forums where i can find the answer? It is very important for me. And can i trouble you for some help about this problem? I will be very grateful for you

Hi! I understand you. I want to create a gallery that will looping or infinite. When it comes to the end of the following elements of the first elements of the show. You understand me? For example, http://codepen.io/bassta/pen/LckBh http://take.ms/zzwJE

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/