Превращаем галерею WP в слайдер

Category: WordPress

функції

// фотогалерея-слайдер
function gallery_slider($output, $attr) {
    $ids = explode(',', $attr['ids']);
    $images = get_posts(array(
        'include'        => $ids,
        'post_status'    => 'inherit',
        'post_type'      => 'attachment',
        'post_mime_type' => 'image',
        'orderby' => 'post__in',
    ));
    if ($images) {
        $output = gallery_slider_template($images);
        return $output;
    }
}
add_filter('post_gallery', 'gallery_slider', 10, 2);

function gallery_slider_template($images) {
    ob_start();
    include 'gallery-to-slider.php';
    $output = ob_get_clean();
    return $output;
}

сторінка

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<style>
  .slickslider li a {
    display: block;
  }

  .slickslider li img {
    max-height: 550px;
    width: auto;
    margin: 0px auto;
  }

  .next svg, .prev svg {
    transition: all .8s ease;
  }

  .next:hover, .prev:hover {
    cursor: pointer;
  }

  .next:hover svg, .prev:hover svg {
    transform: scale(1.5);
  }

  

  .slick-dots {
    list-style: none;
    display: flex;
    justify-content: center;
  }

  .slick-dots li button {
    font-size: 0;
    border: 0;
    outline: none;
    padding: 0;
    background: #00ba37;
    border-radius: 50%;
    width: 14px;
    height: 14px;
  }
  .slick-dots li:not(:last-of-type) {
    margin-right: 10px;
  }
  .slick-dots .slick-active button {
    background: #000;
  }
</style>
<script>
  $('.slickslider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true,
    prevArrow: '<div class="prev"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.117 12l7.527 6.235-.644.765-9-7.521 9-7.479.645.764-7.529 6.236h21.884v1h-21.883z"/></svg></div>',
    nextArrow: '<div class="next"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg></div>',
  });
</script>

gallery-to-slider.php

<ul class="slider slickslider">
<?php
foreach ($images as $image) {
    $src = wp_get_attachment_url($image->ID); // ссылка на изображение
    $alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); // атрибут alt
?>
    <li><a href="<?php echo $src; ?>" target="_blank"><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></a></li>
<?php } ?>
</ul>