circular slider through the z-index

[sweelemk]

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/

[Carl]

Welcome to the GreenSock forums,

 

Thanks for the demo. Looks good so far.

I'm not really sure what you mean by "circular" do you have an image or better description?

 

My guess is that what you need may be very specific to how you are structuring your html / css or perhaps some JavaScript logic.

We really need to keep our support focused on the GSAP API, but if we can understand better we will do our best to point in you in the right direction.

[sweelemk]

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,

See the Pen LckBh by bassta (@bassta) on CodePen

 

http://take.ms/zzwJE

[Carl]

Thank you for clarification.

 

With the bassta demo it is best to take overflow:hidden away so that you can see what is happening:

http://codepen.io/GreenSock/pen/XdZQqm

 

With yours I believe a similar approach will work. When a slide animates away you need to take it and physically move it to the back of the stack.

Unfortunately that is not the type of thing I can create for you as it would probably take over an hour to figure it all out. 

[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