3D Transforms Based jQuery Image Carousel Rotator - Download 3D Transforms Based jQuery Image Carousel / Rotator

Download 3D Transforms Based jQuery Image Carousel / Rotator

By Posted on

This time I will share jQuery Plugin and tutorial about 3D Transforms Based jQuery Image Carousel / Rotator, hope it will help you in programming stack.

3D Transforms Based jQuery Image Carousel Rotator - Download 3D Transforms Based jQuery Image Carousel / Rotator
File Size: 9 KB
Views Total: 2836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

jQuery CSS Carousel uses CSS3 3D transforms to render a 3D perspective hexagon image carousel / rotator with next / prev navigation buttons on your webpage.

How to use it:

1. Add images and navigation buttons into the carousel following the markup structure as follows:

view source
01 <div id="carousel">
02   <div id="container" tcc-rotation="0">
03     <item tc-rotation="120" style="transform: rotateY(120deg) translateZ(200px)"><img src="1.jpg"></item>
04     <item tc-rotation="240" style="transform: rotateY(240deg) translateZ(200px)"><img src="2.jpg"></item>
05     <item tc-rotation="180" style="transform: rotateY(180deg) translateZ(200px)"><img src="3.jpg"></item>
06     <item tc-rotation="0" style="transform: rotateY(0deg)   translateZ(200px)"><img src="4.jpg"></item>
07     <item tc-rotation="-60" style="transform: rotateY(-60deg) translateZ(200px)"><img src="5.jpg"></item>
08     <item tc-rotation="60" style="transform: rotateY(60deg)  translateZ(200px)"><img src="6.jpg"></item>
09   </div>
10   <nav class="tc-btn-container">
11     <div class="tc-next">NEXT</div>
12     <div class="tc-prev">PREV</div>
13   </nav>
14 </div>

2. The required CSS / CSS3 styles for the carousel.

view source
01 #carousel {
02   display: block;
03   height: auto;
04   margin: 0 auto;
05   -webkit-perspective: 80px;
06   perspective: 800px;
07   position: relative;
08   top: 200px;
09   width: 800px;
10 }
11  
12 #container {
13   display: block;
14   height: 200px;
15   margin: 0 auto;
16   transform: rotateY(0deg);
17   -webkit-transform-origin: center bottom 0;
18   transform-origin: center bottom 0;
19   -webkit-transform-style: preserve-3d;
20   transform-style: preserve-3d;
21   -webkit-transition: all 1s ease-in-out;
22   transition: all 1s ease-in-out;
23   width: 200px;
24 }
25  
26 item {
27   display: block;
28   margin: 0;
29   padding: 0;
30   width: 200px;
31   transform: translateZ(400px);
32   position: absolute;
33 }
34  
35 item img { width: 100%; }
36  
37 .tc-btn-container {
38   display: block;
39   float: left;
40   height: 35px;
41   margin-top: -12.5px;
42   position: absolute;
43   top: 50%;
44   width: 100%;
45 }
46  
47 .tc-next {
48   background-color: #333;
49   color: white;
50   display: block;
51   float: right;
52   font-size: 12px;
53   padding: 10px;
54   width: auto;
55   cursor: pointer;
56 }
57  
58 .tc-prev {
59   background-color: #333;
60   color: white;
61   display: block;
62   float: left;
63   font-size: 12px;
64   padding: 10px;
65   width: auto;
66   cursor: pointer;
67 }

3. Put the necessary jQuery JavaScript library at the end of the document.

view source
1 <script src="//code.jquery.com/jquery-2.2.1.min.js"></script>

4. The main JavaScript to active the 3D image carousel.

view source
01 $(document).ready(function($){
02  
03   var crotation;
04   var ro

source : jqueryscript.net

Related posts: