Hiện nay có nhiều thư viện JavaScript hỗ trợ cho việc tạo Carousel Slider cho website. Khi sử dụng các Framework này bạn sẽ tiết kiệm lượng lớn thời gian viết code. Không những thế bố cục trình cũng tượng đối đẹp mắt. Việc của bạn đó là nhúng vào website để cho chạy mà thôi.

Hôm nay mình sẽ giới thiệu tới bạn một thư viện đó JQuery lightSlider. Giúp cho bạn trình bày website phía Front end trở nên đẹp mắt cho Album ảnh, Gallerry.

Bài viết này mình sẽ hướng dẫn bạn cách sử dụng lightSlider như thế nào nhé.

Bước 1: Download về đưa vào thư mục /lib/lightslider

Bước 2: Copy 2 tập tin lightslider.min.csslightslider.min.js trong thư mục /dist của file lightSlider đã tải về đưa vào thư mục /lib/lightslider

Bước 3: Thêm đoạn mã sau vào file functions.php

define( 'BASE_URL', get_template_directory_uri() );
function lightslider_scripts(){
    wp_enqueue_style('lightslidercss', BASE_URL . '/lib/lightslider/lightslider.min.css');
    wp_enqueue_script( 'lightsliderjs', BASE_URL . '/lib/lightslider/lightslider.min.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'lightslider_scripts');

Bước 4: Thêm mã HTML vào vị trí muốn tạo Slider

<ul id="lightSlider">
  <li>
      <img src="https://quachquynh.com/wp-content/uploads/2021/08/bootstrap-4-1-391x250.jpg"/>
  </li>
  <li>
      <img src="https://quachquynh.com/wp-content/uploads/2021/08/bootstrap-4-1-391x250.jpg"/>
  </li>
</ul>

Bước 5: Thêm đoạn mã jQuery phía dưới file footer.php

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#lightSlider").lightSlider({
        item: 1,
        autoWidth: false,
        slideMove: 1,
        slideMargin: 10,
 
        addClass: '',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease',
        easing: 'linear',
 
        speed: 400,
        auto: true,
        loop: true,
        slideEndAnimation: true,
        pause: 2000,
 
        keyPress: false,
        controls: true,
        prevHtml: '',
        nextHtml: '',
 
        rtl:false,
        adaptiveHeight:false,
 
        vertical:false,
        verticalHeight:500,
        vThumbWidth:100,
 
        thumbItem:10,
        pager: true,
        gallery: false,
        galleryMargin: 5,
        thumbMargin: 5,
        currentPagerPosition: 'middle',
 
        enableTouch:true,
        enableDrag:true,
        freeMove:true,
        swipeThreshold: 40,
 
        responsive : [],
 
        onBeforeStart: function (el) {},
        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}
    });
});
</script>

Một vài tùy chỉnh cần chú ý:

  • items: Số item hiển thị cùng một lúc, bạn sẽ thay đổi thông số này
  • speed: tốc độ chuyển slider
  • auto: true hoặc false tự động chạy

Để tìm hiểu chi tiết hơn về các cài đặt bạn hãy truy cập đường dẫn http://sachinchoolur.github.io/lightslider/

Tích hợp Lightslider vào WordPress sẽ làm cho website trở nên thu hút hơn. Ngay sau hướng dẫn trên bạn sẽ cài đặt cho website của mình chứ?

Đọc thêm: Tạo Slide ảnh trong HTML với OwlCarousel

Category:
Tags:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *