I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Did you ever wonder how those cool slideshow jQuery/Javascript plugins split images into pieces and put them back together? The slice effect creates a beautiful look in a slideshow and has become quite popular. That's why I want to share today with you a tutorial with a live demo on how to create a slideshow with a slice transition effect and to spice up the story, how to make infinite scrolling section which I used for my slideshow navigation. All the effects are made with jQuery, CSS3 and GSAP's Tweenmax.js.

COIDEA - Sliced Slideshow with Infinite Horizontal Scrolling Navigation

Sliders. Carousels. Slideshows. No matter what you call them, sliders are an incredibly versatile design tool that allows you to showcase images, video, and other content beautifully and more effectively while maximizing the space on your website. From classic image slideshows to modern fullscreen sliders, sliders come in all shapes and sizes. Designers love them for their flexibility and the visual elements that make it easy to tell a compelling story. Site owners, on the other hand, love them because they can promote multiple facets of business within one website component and space. But, one clear advantage of using a slider/slideshow/carousel for each side is that slideshow allows end users to quickly see the highlights and take action.

As said, today I want to share with you an example to show how to create a slideshow with a slice transition effect and to spice up the story, how to make infinite scrolling section which I used as my slideshow navigation. On website load for each slide in the slideshow, I have one data attribute which holds a unique background image. After loading I take image URL from this data attribute and populate background of the two blank children "background" divs with this image, and that of course for all our items in the slideshow. With the help of CSS3, I create the exact positions for each child's background image. This part is important because this part will give us later feeling a slice effect at full power. With GSAP's TweenMax I put the life in the slideshow and enable change of slides and background images every time we click one navigation item.

And what's happening with slideshow's navigation and how to create a section that scrolls horizontally and infinity  with great support on browsers, mobile inclusive? With GSAP's TweenMax of course, and it's pretty simple. I get the width of scrolling content, clone it and put this cloned part at the end of the original part. After that, with TweenMax's timeline, I move it horizontally in the loop. That's it.

I hope you liked the way I created a sliced slideshow as well as infinite horizontal scrolling and find my demo inspiring and useful!

References and Credits