1BANNER 123
5/5 - (46 bình chọn)

Đây là bài viết đầu tiên sau một kì nghỉ tết của mình, mọi người nghỉ tết có vui không? Phát tài phát lộc cả chứ.

Cũng lâu rồi mình không chia sẻ điều mới, nay mình sẽ chia sẻ một đoạn code giúp bạn có thể thiết kế một slider giống với thế giới di động nhé.

Như vậy nè:

Slider của Thế Giới Di Động (TGDĐ)

Tải và sử dụng thư viện slider của FLICKITY

Bạn muốn tạo slider đẹp mắt bạn nên sử dụng các thư viện tạo slider cho tiện, trong đó thì thư viện FLICKITY đã được tích hợp sẵn trong theme FLATSOME nên mình sẽ sử dụng thư viện này luôn cho tiện.

Còn nếu như bạn nào không sử dụng woocommerce thì có thể tải thư viện này tại: https://flickity.metafizzy.co/

Tải 2 file js và css về

Sau khi tải về bạn tạo một thư mục CSS và JS ngay trong file chính của theme nhé

Tạo 2 thư mục CSS và JS

Rồi cho 2 file mới tải vào 2 thư mục tương ứng. Sau đó sẽ sử dụng code để đăng ký 2 file này nhé.

function theme_pro_scripts() {
    wp_enqueue_style( 'theme-pro-style', get_stylesheet_uri() );
    wp_enqueue_script( 'flickity-js', get_template_directory_uri() . '/js/flickity.pkgd.js', array(), '20191215', true );
    wp_enqueue_style( 'flickity-style', get_template_directory_uri() . '/css/flickity.min.css');

}
add_action( 'wp_enqueue_scripts', 'theme_pro_scripts' );

Bạn chỉ cần copy đoạn code này rồi paste vào function.php là hoàn thành đăng ký JS và CSS cho thư viện FLICKITY rồi nhé.

Như vậy là xong phần đăng ký thư viện, đối với các thư viện khác các bạn cũng làm như vầy là được nhé.

LƯU Ý BẠN CÓ THỂ BỎ QUA BƯỚC NÀY NẾU NHƯ BẠN ĐANG SỬ DỤNG THEME FLATSOME VÌ NÓ ĐÃ ĐƯỢC TÍCH HỢP SẴN BẠN CHỈ CẦN LÀM THEO BƯỚC DƯỚI ĐÂY THÔI

Thiết kế slider giống với Thế giới di động (TGDĐ)

Nhìn vào slider của TGDĐ ta có thể thấy được nó cấu tạo gồm 2 slider nhỏ, một slider hình và một slider chữ.

Đầu tiên chúng ta sẽ tạo ra một slider hình trước nhé.

Slider hình ảnh

Bạn sử dụng đoạn code sau để tạo được một silder hình nhé

<div class="carousel" data-flickity="{"pageDots": false,"prevNextButtons": false,"wrapAround": true }">
  <div class="carousel-cell">Hình 1</div>
  <div class="carousel-cell">Hình 2</div>
  <div class="carousel-cell">Hình 3</div>
  <div class="carousel-cell">Hình 4</div>
  <div class="carousel-cell">Hình 5</div>
</div>

Tất cả thuộc tính trong data-flickity bạn có thể tham khảo tại : https://flickity.metafizzy.co/ nhé. Còn đối với cái trên của mình thì gồm có

  • Dot: False
  • Nút chuyển slider: False

Đoạn code này chỉ giúp bạn có được một slider thôi, còn nếu muốn đẹp thì cần phải thêm 1 ít css nữa.

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
}

Như vậy là chúng ta đã xong phần slider hình ảnh. Toàn bộ code bạn có thể xem tại đây.

<div class="carousel carousel-main" data-flickity="{"pageDots": false,"prevNextButtons": false,"wrapAround": true }">
       <div class="carousel-cell">Hình 1</div>
       <div class="carousel-cell">Hình 2</div>
       <div class="carousel-cell">Hình 3</div>
       <div class="carousel-cell">Hình 4</div>
       <div class="carousel-cell">Hình 5</div>
</div>
<style>
.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
}
</style>

Mình khuyên bạn nên đọc bài chứ đừng copy paste một cách thụ động. Mình là người tự học code nên mình viết theo kiểu mình hiểu nên sẽ giúp bạn cũng sẽ hiểu như mình.

Slider text

Cũng tương tự như slider hình ảnh, chúng ta tạo một slider text với đoạn code sau:

<div class="carousel carousel-nav" data-flickity="{ "asNavFor": ".carousel-main", "pageDots": false,"prevNextButtons": false,"wrapAround": true, "cellAlign": "left" }">
          <div class="carousel-cell">text 1</div>
          <div class="carousel-cell">text 2</div>
          <div class="carousel-cell">text 3</div>
          <div class="carousel-cell">text 4</div>
          <div class="carousel-cell">text 5</div>
 
</div>
<style>
.carousel-nav .carousel-cell {
    height: 100%;
  width: 20%;
}
</style>

Thuộc tính trong data-flickity sẽ gồm

  • asNavFor : Điều khiển class carousel-main
  • Dot: False
  • Nút chuyển slide: Fasle
  • Vị trí slider text mình sẽ để nó hiển thị bên trái, bạn có thể thay center hoặc right tùy thích.

Cuối cùng các bạn có thể CSS nó lại để phù hợp với điều kiện sử dụng thực tế của mình nhé. Trên đây chỉ mới là bộ khung của nó thôi.

Ở bài chia sẻ sau mình sẽ hướng dẫn các bạn kết hợp plugin ACF và thư viện slider FLICKITY để tạo một slider giống thế giới di động nhé.

4 thoughts on “Hướng dẫn làm slider giống thế giới di động (TGDĐ)

  1. Nam Bá says:

    Tuyệt vời lắm Tuấn, Slider dạng này rất phổ biến & phù hợp cho nhiều khách hàng, Trong blog mình cũng sẽ nhắc nhiều tới các Resources của Tuấn nhé

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *