JQuery lightSlider – Tạo Carousel Slider cho WordPress

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.css và lightslider.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://quynhweb.pro/wp-content/uploads/2021/08/bootstrap-4-1-391x250.jpg"/>
  </li>
  <li>
      <img src="https://quynhweb.pro/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ú ý: