3D Touch Carousel Responsive jQuery Plugin

3D Touch Carousel is a jQuery javascript plugin for creating a carousel gallery. It supports simulate 3d modeand real 3d mode powered by CSS3 . Also it has reflection for the images, and can be set titles to show on image. Touch events are supported on Android and IOSX devices.
Titles can be personalizzed with custom effects to show. This plugin can be ease integrate with light box like systems.

Jadi yang pertama anda lakukan dengan menyimpan kode CSS & SCRIPT berikut di template anda!

CSS::

<!-- CSS  -->
<style>
.carousel-title{
height:40px;
width:350px;
padding:5px;
}
.carousel-title span, .carousel-title a {
color: #FFFFFF;
font-family: 'Volkhov',sans-serif;
font-size: 24px;
text-shadow: 1px 1px 1px #E0D1BC;
}
.carousel-subtitle{
color: #FFFFFF;
font-size: 14px;
padding:5px;
}
</style>

<link rel="stylesheet" type="text/css" href="http://3.s3.envato.com/files/37836635/css/theme1/style.css" />

SCRIPT::

<!-- SCRIPT  -->
<script type="text/javascript" src="http://3.s3.envato.com/files/37836635/js/jquery.js"></script>

<script type="text/javascript" src="http://3.s3.envato.com/files/37836635/js/carousel.js"></script>

Selanjutnya pemanggilan HTMLnya, jadi dibawah ini ada beberapa efek '3D Touch Carousel Responsive jQuery Plugin'! silahkan diperhatikan yaa..

1. Live Example 3D CSS3 CAROUSEL. klik disini...
Jika tertarik memasang efek ini, maka gunakan HTML berikut.

<div id="3DC3Cut" style="width:900px; height:600px;overflow:visible;margin:0 auto;background-color:#000">    
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<span data-start="{width:0}" data-stop="{width:300}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Custom title with Transitions</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
CSS3 Transition supported
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Multiple titles with multiple transitions</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Set up links, images and other in the titles
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<span data-start="{height:0,padding:0}" data-stop="{height:40,padding:5}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>jQuery easing support</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
MouseWheel support with no plugins
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Small script with just 14k</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Fast and Optimized
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Touch gestures support</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Android, ISOX
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Find more plugins on my page</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Fine Zoom
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-title">
<span>Visit <a href="http://www.albanx.com">my web site</a></span>
</span></div>

</div>

<script tyle="text/javascript">
$("#3DC3Cut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
orientation:'H'
});
</script>

2. Live Example SIMULATED 3D CAROUSEL. klik disini...
Jika tertarik memasang efek ini, maka gunakan HTML berikut.

<div id="S3DCut" style="width:1100px;height:500px;overflow:visible;margin:0 auto;background-color:#000">    
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/mercury.png" />
<span data-start="{width:0}" data-stop="{width:300}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Mercury</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/venus.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Venus</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/earth.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Earth</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/mars.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Mars</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/jupiter.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Jupiter</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/saturn.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Saturn</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/uranus.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Uranus</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/neptun.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Neptun</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/pluton.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Pluton</span>
</span></div>

</div>

<script tyle="text/javascript">
$("#S3DCut").carousel3d({
mode:'2d',
autoPlay:-1,
autoPlayInterval:2000,
navigation:'mouseover',
perspective:500,
animationSpeed:20,
centerImg:'http://3.s3.envato.com/files/37836635/images2/sun.png',
reflectionHeight:0,
responsive:false,
radiusZ:1000,
radiusX:1000
});
</script>

3. Live Example X AXIS ROTATION. klik disini...
Jika tertarik memasang efek ini, maka gunakan HTML berikut.

<div id="XARut" style="width:700px;height:400px;overflow:visible;margin:0 auto;">    
               
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />

</div>

<script tyle="text/javascript">
$("#XARut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
positionY:100,
rotateX:-20
});
</script>

4. Live Example 3D Vertical Mode. klik disini...
Jika tertarik memasang efek ini, maka gunakan HTML berikut.

<div id="3DVMut" style="width:700px;height:400px;overflow:visible;margin:0 auto;">    
               
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />

</div>

<script tyle="text/javascript">
$("#3DVMut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
orientation:'V'
});
</script>

5. Live Example Mini Banners Rotator. klik disini...
Jika tertarik memasang efek ini, maka gunakan HTML berikut.

a.HTML untuk  bagian atas.

<div class="MBRutaka" style="width:300px; height:100px;overflow:visible;margin:0 auto">    
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
</div>
<script tyle="text/javascript">
$(".MBRutaka").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:2000,
navigation:false,
orientation:'H'
});
</script>

b.HTML untuk bagian bawah.

<div class="MBRutaka2" style="width:300px; height:100px;overflow:visible;margin:0 auto">    
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />
</div>
<script tyle="text/javascript">
$(".MBRutaka2").carousel3d({
mode:'3d',
autoPlay:-1,
autoPlayInterval:1500,
navigation:false,
orientation:'H',
positionY:0,
rotateX:-20,
overflow:'visible'
});
</script>

NB::
-Silahkan anda rubah kodenya sesuai keinginan masing-masing..

semoga tutorial ini bermanfaat bagi kita semua.. ^^ Please rate this article: