Cách tạo Carousel từng cột nội dung trong Flatsome

Trong bài viết mình sẽ hướng dẫn bạn cách tạo Carousel từng cột nội dung trong flatsome. Nhiều khi muốn thêm 1 carousel để slide từng cột nội dung, ví dụ mỗi cột chứa hình ảnh, vài dòng text và nút theo ý mình (ví dụ như hình dưới), những mà các khổi của flatsome thì không có sẵn. Vậy nên mới cần bài viết này nè.

Thêm JS đê tạo tính năng carousel cho Row

Hiểu nôm nà là bây giờ bạn có 1 row chứa 5 cột, mỗi cột có chiều rông 1/3, nghĩa là mỗi dòng sẽ chứa 4 cột, theo mặc định thì cột thứ 5 nó sẽ tự xuống dòng. Nhưng với code này thì bắt đầu từ cột thứ 5 trở đi nó sẽ tự đưa vô slide hen.

Bạn vào Flatsome -> Advanced -> rồi thêm code JS bên dưới vào Header Scripts

<script>
(function($) {
$(document).ready(function() {
$('.row-slider-image-box').each(function() {
$(this).find('style[scope="scope"]').remove();
$(this).lazyFlickity({
cellAlign: 'left',
contain: true,
groupCells: 1,
prevNextButtons: true,
pageDots: true,
autoPlay: true,
wrapAround: true,
percentPosition: true,
lazyLoad: 1,
});
});
});
})(jQuery);
</script>

Để ý đoạn class ở script trên:  row-slider-image-box

Ta sẽ dùng Class này để thêm vào row trong uxbuilder nhé.

Thêm Class vào Row trong Flatsome

Ở Row mà bạn muốn nó biến thành carousel thì bạn thêm class row-slider-image-box vào ô Class như hình dưới nhé

Như vậy là Row đó đẫ chuyển thành carousel thành công rồi đó. Nhưng mà vẫn còn 1 bước nửa để css cho thành điều hướng.

Thêm css cho thanh điều hướng

Vào Giao diện -> Tùy chỉnh -> Css bổ sung rồi thêm đoạn css bên dưới nhé là xong nhé.

.row-slider-image-box .flickity-page-dots{
	display:none; /*Đây là dấu chấm điều hướng, nếu muốn hiện thì sửa none thành block*/
	}
.row-slider-image-box .flickity-prev-next-button {
    background-color: #fff;
    bottom: 0;
    height: 30px;
    margin: 0 !important;
    top: 50%;
    width: 40px;
    opacity: 0;
	border-radius: 100%;
}
.row-slider-image-box:hover .flickity-prev-next-button{
	opacity: 1;
}

Sau khi xong hết thì ta có thành quả như hình ở đầu bài viết nhé.

Kết luận

Vậy là với đoạn code trên bạn có thể dễ dàng tạo Carousel từng cột nội dung trong Flatsome.

Hãy ủng hộ mình thêm để có động lực làm thêm nhiều bài viết hay về WordPress nói chung và Flatsome nói riêng nhé.