Post Carousel

 

/* Function.php */

/* Featured Post Carousel */
function featured_post_slider()
{
    ob_start();
    ?> 
<HTML>
<head></head>
<body>
<div class="featured-post-slider">
<div class="swiper post-slide">
  <div class="swiper-wrapper">
  
<?php
$featured_post = get_field('select_post','option');
$args = array(  
'post_type' => 'post',
'post_status' => 'publish',
'order' => 'DESC',
'post__in' => $featured_post
);

// Query the posts:
$dataobituary_query = new WP_Query($args);


// Loop through the obituaries:
while ($dataobituary_query->have_posts()):
$dataobituary_query->the_post();
?>
  
<?php $img = get_the_post_thumbnail_url($post_ID, 'post-thumbnail'); ?>
<div class="swiper-slide" style="background: url('<?php echo $img;?>') no-repeat center center; background-size: cover;">
<div class="post-main-wrapper">
<div class="row">
<div class="col-lg-7">
</div>
<div class="col-lg-5">
<div class="slider-right-content-wrapper">
<div class="featured-post-title">
<h4>
Featured Post
</h4>
</div>
<div class="post-category">
<?php 
$the_cat = get_the_category();
$category_name = $the_cat[0] -> cat_name;
$category_link = get_category_link($the_cat[0] -> cat_ID);
?>
<a href="<?php echo $category_link; ?>">
<?php echo $category_name; ?>
</a>
</div>
<div class="post-title">
<h2>
<?php the_title();?>
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
  
<?php 
endwhile;
wp_reset_postdata();
?>
  </div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
</HTML> <?php
    return ob_get_clean();
}

add_shortcode( 'featured_post_slider' , 'featured_post_slider' );



/*  JS */


/* Featured Post Carousel JS*/
var swiper = new Swiper('.post-slide', {
spaceBetween: 10,
slidesPerView: 1,
grabCursor: true,
autoplay: {
delay: 2500,
},
loop: true,
pagination: {
  el: ".swiper-pagination",
clickable: true,
},
});