Tạo Slider tùy chỉnh với ACF Pro Flatsome

Tạo Slider trong Flatsome đơn giản, dễ cập nhật, tương thích với các thiết bị với ACF Pro

1. Tạo Slider hình ảnh với hai phiên bản Desktop – Tablet và Mobile

Bước 1: Tạo Field Group và đặt tên, ví dụ: Slider

Chú ý chọn Location phù hợp để tiến hành gọi các trường thông tin của Field ra bằng code PHP ở bước sau.

Bước 2: Tạo 2 Field với Field Type là Repeater tương ứng với 2 phiên bản Desktop – Tablet và Mobile

Field dành cho Mobile

Ở mỗi Field, tạo các Sub Field tương ứng

• Hình ảnh: Field Type là Image và Return Format là Image URL
• Link: Field Type là Text hoặc URL

Bước 3: Code PHP để gọi các trường ra ngoài và hiển thị

Sử dụng đoạn code sau và đặt vào vị trí hiển thị ở Template đã chọn ở Bước 1

<!--- Home Slider --->
<div class="homeslider row row-collapse row-full-width slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": false, "autoPlay" : false}'>
    <?php if(!wp_is_mobile()) : ?>
        <?php if(have_rows('desktop_slider')) : ?>
            <?php while(have_rows('desktop_slider')) : the_row(); ?>
            <div class="col large-12">
                <?php if(get_sub_field('link_slider')) : ?><a href="<?php the_sub_field('link_slider'); ?>"><?php endif; ?>
                <img src="<?php the_sub_field('hinhanh_slider'); ?>" style="width:100%">	
                <?php if(get_sub_field('link_slider')) : ?></a><?php endif; ?>
            </div>	
            <?php endwhile; ?>
        <?php endif; ?>
    <?php endif; ?>
    <?php if(wp_is_mobile()) : ?>
        <?php if(have_rows('mobile_slider')) : ?>
            <?php while(have_rows('mobile_slider')) : the_row(); ?>
            <div class="col large-12">
                <?php if(get_sub_field('link_slider')) : ?><a href="<?php the_sub_field('link_slider'); ?>"><?php endif; ?>
                <img src="<?php the_sub_field('hinhanh_slider'); ?>" style="width:100%">	
                <?php if(get_sub_field('link_slidermb')) : ?></a><?php endif; ?>
            </div>	
            <?php endwhile; ?>
        <?php endif; ?>
    <?php endif; ?>
</div>
<!--- End Home Slider --->