02/10/2018, 20:45
Tạo Album ảnh đẹp với jQuery Chop Slider
Trong bài này tôi giới thiệu các bạn một cách làm Photo Album ấn tượng với Jquery với jQuery Chop Slider. Với các hiệu ứng khá đẹp giúp bạn có Photo Album sinh động trên website Trong bài này tôi giới thiệu các bạn một cách làm Photo Album ấn tượng với Jquery với jQuery ...
Trong bài này tôi giới thiệu các bạn một cách làm Photo Album ấn tượng với Jquery với jQuery Chop Slider. Với các hiệu ứng khá đẹp giúp bạn có Photo Album sinh động trên website
Trong bài này tôi giới thiệu các bạn một cách làm Photo Album ấn tượng với Jquery với jQuery Chop Slider. Với các hiệu ứng khá đẹp giúp bạn có Photo Album sinh động trên website
DEMO | DOWNLOAD
Thực hiện:
Code html (index.html)
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Tạo Album ảnh đẹp với jQuery Chop Slider - hmclip.vn</title> <link href="css/layout.css" rel="stylesheet nofollow" type="text/css" /> <link href="css/chopslider.css" rel="stylesheet nofollow" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script> <script src="js/jquery.id.cstransitions-1.2.min.js"></script> <script src="js/main.js"></script> </head> <body> <header> <h1>Tạo Album ảnh đẹp với jQuery Chop Slider</h1> <a href="http://blog.hmclip.vn/jquery/tao-album-anh-dep-voi-jquery-chop-slider.htm" class="stuts">Xem bài hướng dẫn thực hiện</a> </header> <div class="container"> <div class="wrapper"> <div class="s-shadow-b"></div> <a id="slide-next" href="#"></a> <a id="slide-prev" href="#"></a> <div id="slider"> <div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" awidth="900" height="300" alt="photo #1" /> </div> <div class="slide"> <img src="slide_images/pic2.jpg" awidth="900" height="300" alt="photo #2" /> </div> <div class="slide"> <img src="slide_images/pic3.jpg" awidth="900" height="300" alt="photo #3" /> </div> <div class="slide"> <img src="slide_images/pic4.jpg" awidth="900" height="300" alt="photo #4" /> </div> <div class="slide"> <img src="slide_images/pic5.jpg" awidth="900" height="300" alt="photo #5" /> </div> <div class="slide"> <img src="slide_images/pic6.jpg" awidth="900" height="300" alt="photo #6" /> </div> <div class="slide"> <img src="slide_images/pic7.jpg" awidth="900" height="300" alt="photo #7" /> </div> </div> <div class="pagination"> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> </div> <div class="slide-descriptions"> <div class="sl-descr">Thailand, There are very many different ATM in one place</div> <div class="sl-descr">All city colour is bright, nothing black</div> <div class="sl-descr">Floating market. Shopping on river</div> <div class="sl-descr">Sunset on Koh Phangan island</div> <div class="sl-descr">Shortly before sunset</div> <div class="sl-descr">Good sculpture on Koh Samui island</div> <div class="sl-descr">That is such cute barmaid you can see here</div> </div> <div class="caption"></div> </div> </div> </body> </html>
Code Jquery:
Bạn cần có các thư viện của jQuery Chop js/jquery.id.chopslider-2.2.0.free.min.js vàjs/jquery.id.cstransitions-1.2.min.js 2 file này bạn download trong link ửi kèm. Bạn cần viết thêm code jquery như sau để thực hiện chạy Slide
jQuery(function(){ $("#slider").chopSlider({ /* slide element */ slide : ".slide", /* controlers */ nextTrigger : "a#slide-next", prevTrigger : "a#slide-prev", hideTriggers : true, sliderPagination : ".slider-pagination", /* captions */ useCaptions : true, everyCaptionIn : ".sl-descr", showCaptionIn : ".caption", captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)", /* autoplay */ autoplay : true, autoplayDelay : 5000, /* for Browsers that support 3D transforms */ t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */ t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ], noCSS3 : csTransitions['noCSS3']['random'], mobile : csTransitions['mobile']['random'], onStart: function(){}, onEnd: function(){} }) })
CSS
Bạn có thể tham khảo trong file gửi download
Nguồn:http://www.thietkewebsmart.com/html-css/tao-album-anh-dep-voi-jquery-chop-slider/898.htm
Bình luận