Carousel Bootstrap

Link tham khảo http://getbootstrap.com.vn/javascript/#carousel

Cấu trúc một carousel:

view plainprint?

1. <span class="nt"><div class="col-md-6 col-md-offset-3">  
2. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  
3.   <!-- Indicators -->  
4.   <ol class="carousel-indicators">  
5.     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>  
6.     <li data-target="#carousel-example-generic" data-slide-to="1"></li>  
7.     <li data-target="#carousel-example-generic" data-slide-to="2"></li>  
8.     <li data-target="#carousel-example-generic" data-slide-to="3"></li>  
9.   </ol>  
10.   
11.   <!-- Wrapper for slides -->  
12.   <div class="carousel-inner">  
13.     <div class="item active">  
14.       <img src="http://placehold.it/500/e499e4/fff&amp;text=1">  
15.       <div class="carousel-caption">  
16.         caption 1  
17.       </div>  
18.     </div>  
19.     <div class="item">  
20.       <img src="http://placehold.it/500/e499e4/fff&amp;text=2">  
21.       <div class="carousel-caption">  
22.         caption 2  
23.       </div>  
24.     </div>  
25.   
26.     <div class="item">  
27.       <img src="http://placehold.it/500/e499e4/fff&amp;text=3">  
28.       <div class="carousel-caption">  
29.         caption 3  
30.       </div>  
31.     </div>  
32.   
33.     <div class="item">  
34.       <img src="http://placehold.it/500/e499e4/fff&amp;text=4">  
35.       <div class="carousel-caption">  
36.         <h1>Caption 4</h1>
37.         <p>content </p>  
38.       </div>  
39.     </div>    
40.   </div>  
41.   
42.   <!-- Controls -->  
43.   <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">  
44.     <span class="glyphicon glyphicon-chevron-left"></span>  
45.   </a>  
46.   <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">  
47.     <span class="glyphicon glyphicon-chevron-right"></span>  
48.   </a>  
49. </div>  
50. </div></span>  

Đây chỉ là mặc định trong Carousel. Để thêm hiệu ứng cho nó ta cần thêm css. ví dụ như sau:

view plainprint?

1.     .carousel-inner img{  
2.   
3.         width:100%;  
4.   
5.     }  
6.   
7.     .carousel-inner .item{  
8.   
9.         transition:opacity 0.4s ease-in-out ;  
10.   
11.         -webkit-transition:opacity 0.4s ease-in-out;  
12.   
13.         -ms-transition:opacity 0.4s ease-in-out;  
14.   
15.     }  
16.   
17.     .carousel-inner .active.left,.carousel-inner .active.right{  
18.   
19.         left:0;  
20.   
21.         opacity:0.3;  
22.   
23.     }   
24. .carousel-inner .next,.carousel-inner .prev {  
25.      opacity:0.5;  
26. }  
27. .item h1{{position:absolute;top:150px;text-align:center;width:100%;transition:all ease-in-out 0.2s;opacity:0}
28. 
    
29. .item p{position:absolute;top:200px;text-align:center;width:100%;transition:all ease-in-out 0.4s;opacity:0}
30. 
    
31. .item.active h1, .item.activep{opacity:1}
32. 
    
33. .item.active h1{animation: run  0.2s ease-in-out ;}
34. 
    
35. .active.item{
36. 
    
37. animation-delay:0.4s;
38. 
    
39. run  0.2s ease-in-out}
40. 
    
41. @keyframes run{
42. 
    
43. 0%{opacity:0;transform:scale(0.3);}
45. @media all and (transform-3d), (-webkit-transform-3d) {
46.     .carousel-fade .carousel-inner > .item.next,
47.     .carousel-fade .carousel-inner > .item.active.right {
48.       opacity: 0;
49.       -webkit-transform: translate3d(0, 0, 0);
50.               transform: translate3d(0, 0, 0);
51.     }
52.     .carousel-fade .carousel-inner > .item.prev,
53.     .carousel-fade .carousel-inner > .item.active.left {
54.       opacity: 0;
55.       -webkit-transform: translate3d(0, 0, 0);
56.               transform: translate3d(0, 0, 0);
57.     }
58.     .carousel-fade .carousel-inner > .item.next.left,
59.     .carousel-fade .carousel-inner > .item.prev.right,
60.     .carousel-fade .carousel-inner > .item.active {
61.       opacity: 1;
62.       -webkit-transform: translate3d(0, 0, 0);
63.               transform: translate3d(0, 0, 0);
64.     }
65. }
66. 
    
67. }