- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
Đầu tiên bạn cần tải thư viện flexslider được tạo bởi woothemes:
Chèn đoạn code dưới đây trong thẻ head.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script>
Thêm cấu trúc HTML cho slider.
<!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li style="list-style-type: none;"> <ul class="slides"> <li><img src="slide1.jpg" /></li> </ul> </li> </ul> <ul class="slides"> <li style="list-style-type: none;"> <ul class="slides"> <li><img src="slide2.jpg" /></li> </ul> </li> </ul> <ul class="slides"> <li style="list-style-type: none;"> <ul class="slides"> <li><img src="slide3.jpg" /></li> </ul> </li> </ul> </div>
Cuối cùng khởi tạo slider với mã JS này.
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Sửa lỗi slider
:
Flexslider ảnh load chậm:
Sau khi dành thời gian tìm kiếm trên internet mình có tìm ra một cách để giải quyết vấn đề này. Trong file css thêm đoạn vào dòng sau:
.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}
/*or*/
.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
Điều đó sẽ làm cho hình ảnh đầu tiên xuất hiện và nó sẽ chờ các hình ảnh tiếp theo khác được tải sau cùng.
Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype