Download Responsive Fullscreen Slice Image Slider With jQuery And GSAP

A pretty cool responsive fullscreen slider/carousel which enables the user to slide through images with slice and parallax effects, powered by jQuery, CSS3 and GSAP‘s TweenMax.js.

How to use it:

1. Add your images together with the SVG based navigation arrows into the slider carousel.

view source

001	<div class="slice-slider">

002	<div class="navigation navigation--prev">

003

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M30.55 39.69c.567-.475.645-1.314.17-1.882L20.044 25 30.72 12.19c.474-.566.396-1.408-.17-1.88-.564-.474-1.407-.397-1.88.17L17.28 24.145c-.208.248-.312.552-.312.855s.104.608.31.855L28.67 39.52c.474.566 1.316.642 1.882.17z"/></svg>

004

</div>

005	<div class="navigation navigation--next">

006

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M19.45 10.31c-.567.475-.644 1.314-.17 1.88L29.956 25 19.28 37.81c-.473.566-.396 1.408.17 1.88s1.408.397 1.88-.17l11.39-13.664c.208-.248.312-.552.312-.855s-.104-.607-.31-.854L21.33 10.48c-.474-.566-1.316-.643-1.882-.17z"/></svg>

007

</div>

008

009

010	<div class="slider-container">

011

<div>

012	<div class="slider-slice">

013	<div class="slider-slice-imageContainer image--0 image--active">

014	<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">

015

</div>

016	<div class="slider-slice-imageContainer image--1">

017	<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">

018

</div>

019	<div class="slider-slice-imageContainer image--2">

020	<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">

021

</div>

022	<div class="slider-slice-imageContainer image--3">

023	<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">

024

</div>

025	<div class="slider-slice-imageContainer image--4">

026	<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">

027

</div>

028

</div>

029	<div class="slider-slice">

030	<div class="slider-slice-imageContainer image--0 image--active">

031	<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">

032

</div>

033	<div class="slider-slice-imageContainer image--1">

034	<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">

035

</div>

036	<div class="slider-slice-imageContainer image--2">

037	<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">

038

</div>

039	<div class="slider-slice-imageContainer image--3">

040	<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">

041

</div>

042	<div class="slider-slice-imageContainer image--4">

043	<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">

044

</div>

045

</div>

046	<div class="slider-slice">

047	<div class="slider-slice-imageContainer image--0 image--active">

048	<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">

049

</div>

050	<div class="slider-slice-imageContainer image--1">

051	<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">

052

</div>

053	<div class="slider-slice-imageContainer image--2">

054	<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">

055

</div>

056	<div class="slider-slice-imageContainer image--3">

057	<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">

058

</div>

059	<div class="slider-slice-imageContainer image--4">

060	<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">

061

</div>

062	</div Share this: Facebook Tweet WhatsApp Related posts: Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js Free Download Powerful Calendar Plugin With jQuery – Calendar.js