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

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ọn Location phù hợp
Chọn Location phù hợp

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 Desktop - Tablet
Field dành cho Desktop – Tablet

Field dành cho Mobile

Field dành cho Mobile

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

  • Hình ảnh: Field TypeImageReturn FormatImage URL
  • Link: Field TypeText 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 --->

 

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận

Danh mục bài viết

Khám phá những nội dung mới nhất

0
Rất thích suy nghĩ của bạn, hãy bình luận.x