javascript - 如何使用 Elementor 和 Swiper.js 在帖子 slider 上定位自定义帖子类型

Question

我正在尝试使用 Swiper JS 创建一个帖子 slider ，一次显示一个帖子。我将 Elementor Pro 与自定义帖子类型 UI、高级自定义字段和 Ele 自定义皮肤插件一起使用。

使用 Ele Custom Skin 我有一个为 slider 创建的自定义循环模板，我使用以下代码尝试将此设计制作成 slider 但没有这样的运气。

感谢帮助。

(作为引用，我正在尝试实现与此页面上的时间轴 slider 类似的内容: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

我不知道您的限制是什么，但假设您可以选择短代码，那将是我的建议。您可以将此简码添加到您自己的插件或函数文件中，使用 元素或简码小部件添加简码，然后只需在页面上调用您的 JS 即可激活 slider 。

<?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]