Đâ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è:
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/
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é
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é.
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-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.
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-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-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é.
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é
Cảm ơn anh ^^
E cũng làm được cái này rồi, nhưng cũng muốn học hỏi thêm nên cũng hóng :3
Thanks. Slide này đẹp nên mình sẽ note lại làm. Css responsive nữa là ngon