Chia Sẻ Code Tạo Gallery Image Bằng Slick Và Acf Pro Cho WordPress

Trong các giao diện website bất động sản và du lịch thường các bài viết sẽ tạo Gallery Image để chia sẻ các ảnh một cách chuyên nghiệp. Trong bài viết này mình sẽ chia sẻ với các bạn code tạo gallery image bằng slick và acf pro. Các bạn có thể tham khảo và sử dụng nó nếu cần nhé.

Chia Sẻ Code Tạo Gallery Image Bằng Slick Và Acf Pro

Để có thể dùng được Slick bạn phải thêm css và js của nó vào website của bạn trước gồm 3 file: slick.css, slick-theme.css và slick.min.js. Tiếp theo là bạn cần cài thêm ACF Pro, vì chỉ bản pro thì mới có Gallery. Sau đó tạo Field Gallery.

Có thể bạn quan tâm: những đoạn code hay dùng trong lập trình theme wordpress

1] Chèn code hiển thị Gallery vào nơi bạn muốn

<div class="main-slide">
               <?php 
               $images = get_field('slide_image');
               if( $images ): ?>
                <div class="slider slider-for">
                  <?php foreach( $images as $image ): ?>
                    <div><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></div>
                  <?php endforeach; ?>
                </div>
                <div class="slider slider-nav">
                  <?php foreach( $images as $image ): ?>
                   <div><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></div>
                 <?php endforeach; ?>
               </div>
             <?php endif; 
             ?>
           </div>

Trong đó thay slide_image bằng tên fields của bạn đã tạo.

2] Thêm JS cho Slide

 $('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
 });
 $('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

 $('a[data-slide]').click(function(e) {
   e.preventDefault();
   var slideno = $(this).data('slide');
   $('.slider-nav').slick('slickGoTo', slideno - 1);
 });

3] Thêm CSS cho Slide

.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

.product-slides-modal img {
  max-width: 100%;
}

.sliderNavProduct div.slick-slide.slick-current img {
  border: 1px solid #f96400;
}

div#sliderForProduct img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
div#sliderNavProduct img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

Kết luận

Trên đây là Code Tạo Gallery Image Bằng Slick Và Acf Pro mà bạn có thể tham khảo. Hy vọng với chia sẻ mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn, chúc bạn thành công.

Theo dõi trên