How to target custom post type on post slider with Elementor and Swiper.js

user_6275579 0
Viewed 1686

I am trying to create a post slider that shows one post at a time using Swiper JS. I am using Elementor Pro with Custom Post Type UI, Advanced Custom Fields and Ele Custom Skin plugins.

With Ele Custom Skin I have a custom loop template created for the slider and I have used the following code to try and make this design into a slider but with no such luck.

Help appreciated.

(For reference, I'm trying to achieve something similar to the timeline slider on this page: 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;
  }```
elementor swiper.js wordpress javascript
1 Answers

I don't know what your limitations are, but assuming you have the option of a shortcode, that would be my suggestion. You could add this shortcode to a plugin of your own or functions file, add the shortcode usinig elementor shortcode widget, and then just call your JS on the page to activate the 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;


}

Then use the shortcode Elementor widget:

[post_swiper]
user_94689610
Related