title: How to target custom post type on post slider with Elementor and Swiper.js
body: <p>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.</p>
  <p>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.</p>
  <p>Help appreciated.</p>
  <p><em>(For reference, I'm trying to achieve something similar to the timeline slider on this page: <a href="https://rudehealth.com/about-us/" rel="nofollow noreferrer">https://rudehealth.com/about-us/</a>)</em></p>
  <p><strong>JAVASCRIPT</strong></p>
  <pre><code>      jQuery(&quot;.post_slide .elementor-widget-container&quot;).addClass(&quot;swiper-container&quot;);
    jQuery(&quot;.post_slide .elementor-posts-container&quot;).addClass(&quot;swiper-wrapper&quot;);
      jQuery(&quot;.post_slide .elementor-post&quot;).addClass(&quot;swiper-slide&quot;);
    jQuery('.swiper-container').append('&lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;'); 
    
      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',
            },
      
          });
    
    });
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>    display: flex !important;
      flex-wrap: inherit;
    }```
  
    
  </code></pre>