如何使用Elementor和Swiper.js在发布滑块上定位自定义发布类型

问题描述

我正在尝试创建一个使用Swiper JS一次显示一个帖子的帖子滑块。我将Elementor Pro与Custom Post Type UI，Advanced Custom Fields和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,1024: {
              slidesPerView: 1,pagination: {
            el: '.swiper-pagination',clickable: true,navigation: {
            nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',});
  
  });

CSS

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

  

解决方法

我不知道您的限制是什么，但是假设您可以选择使用简码，那将是我的建议。您可以将此简码添加到自己或函数文件的插件中，添加简码usinig元素或简码小部件，然后只需在页面上调用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]