Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tối ưu PageSpeed Insights
    • Cloud Cache (Tăng tốc web 1 giây)
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Sử dụng flexslider gallery trong WordPress với Woothemes

Sử dụng flexslider gallery trong WordPress với Woothemes

Thứ Năm, 03/07/2014 by Hoàng Quách

  • shares
  • Facebook
  • 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">
&nbsp;
<ul class="slides">
 	<li style="list-style-type: none;">
<ul class="slides">
 	<li><img src="slide1.jpg" /></li>
</ul>
</li>
</ul>
&nbsp;
<ul class="slides">
 	<li style="list-style-type: none;">
<ul class="slides">
 	<li><img src="slide2.jpg" /></li>
</ul>
</li>
</ul>
&nbsp;
<ul class="slides">
 	<li style="list-style-type: none;">
<ul class="slides">
 	<li><img src="slide3.jpg" /></li>
</ul>
</li>
</ul>
&nbsp;

</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 &gt; li:first-child {display: block; -webkit-backface-visibility: visible;} 
/*or*/
.flexslider .slides &gt; 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
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Tạo gallery ảnh cho wordpress
  2. Smooth Page Scroll to Top với jQuery Smooth scroll cho wordpress
  3. WordPress Meta slider API
  4. Sử lý xung đột jquery trong wordpress
  5. Tạo jQuery Slider lặp vô hạn infinite scrolling
  6. 5 điều lưu ý khi sử dụng jquery trong wordpress
  7. Thêm tính năng cloud zoom cho product gallery – woocommerce
  8. Phóng ảnh cloud zoom với plugin gallery metabox trong wordpress
  9. WordPress bị hacked và vấn đề bảo mật
  10. Tạo .htaccess chống hacked trong WordPress

Chuyên mục: Wordpress Tìm kiếm: flexslider, gallery, jQuery, jqueryui, slider

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.