Как настроить таргетинг на пользовательский тип сообщения на слайдере сообщений с помощью Elementor и Swiper.js

Question

Я пытаюсь создать слайдер сообщений, который показывает по одному сообщению за раз, используя Swiper JS. Я использую Elementor Pro с пользовательским интерфейсом Custom Post Type, расширенными настраиваемыми полями и плагинами Ele Custom Skin.

С Ele Custom Skin у меня есть настраиваемый шаблон цикла, созданный для слайдера, и я использовал следующий код, чтобы попытаться превратить этот дизайн в слайдер, но безуспешно.

Помощь приветствуется.

(Для справки, я пытаюсь добиться чего-то похожего на ползунок временной шкалы на этой странице: https://rudehealth.com/about-us/)

JAVASCRIPT

      jQuery(".post_slide .elementor-widget-container").addClass("swiper-container");
  jQuery(".post_slide .elementor-posts-container").addClass("swiper-wrapper");
    jQuery(".post_slide .elementor-post").addClass("swiper-slide");
  jQuery('.swiper-container').append('<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'); 
  
    var swiper = new Swiper('.swiper-container', {
          spaceBetween: 0,
           slidesPerView: 1,
           autoplay:true,
          breakpoints: {
            640: {
              slidesPerView: 1,
              spaceBetween: 0,
            },
            768: {
              slidesPerView: 1,
              spaceBetween: 0,
            },
            1024: {
              slidesPerView: 1,
              spaceBetween: 0,
            },
          },
      
        
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
    
        });
  
  });

CSS

    display: flex !important;
    flex-wrap: inherit;
  }```

  

Answer 1

Я не знаю, каковы ваши ограничения, но если у вас есть возможность использовать шорткод, это было бы моим предложением. Вы можете добавить этот шорткод в свой собственный плагин или файл функций, добавить шорткод usinig element или виджет шорткода, а затем просто вызвать свой JS на странице, чтобы активировать слайдер.

<?php

add_shortcode( 'post_swiper', 'post_swiper_shortcode');

function post_swiper_shortcode($atts) {

  // start output buffer
  ob_start();

  // set shortcode defaults and any options you want available in the shortcode
  extract( shortcode_atts( array(

    'post_type' => 'post_type_name', // add post type name here as a default, you can then use this same shortcode for any other post type
    'posts_per_page' => 10 // however many posts you want

    // add any other defaults you may want and leave an empty string you can add in the shortcode.  For example taxonomies.

  ), $atts ) );

  // set up your query params

  $options = array(

    'post_type' => $post_type,
    'posts_per_page' => $posts_per_page

    // any other params
    
  );

  // get the posts

  $posts = get_posts($options);

  if ($posts) { ?>

    <!-- If there are posts to display then add the swiper container -->

    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          
    <?php foreach ($posts as $post) { ?>
      
        <!-- Slides.  Add a slide for each found post with data -->
        <div class="swiper-slide">
          <!-- Add content of slide.  Example below -->
          <?php echo $post->post_title; ?>
          
        </div>
      
    <?php } ?>

        </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>
    
  <?php
  wp_reset_postdata();
  
    
} else {

  // do something else if there are no posts if you want
  
}


  // return the content to be shown

  $content = ob_get_clean();
  return $content;


}

Затем используйте виджет Elementor шорткода:

[post_swiper]