Blog & News
<section class="section overflow-hidden position-relative z-index-0">
<div class="container">
<div class="row mb-5 justify-content-start text-dark">
<div class="col-lg-5 md-mb-20px">
<h3 class="fw-600 mb-0 ls-minus-1px"><?php echo "{$post_title}";?></h3>
</div>
</div>
<div class="row align-items-center">
<div class="col-12">
<div class="outside-box-right-25 sm-outside-box-right-0">
<div class="swiper slider-one-slide swiper-number-pagination-progress" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "pagination": { "el": ".swiper-number-line-pagination", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }' data-swiper-number-pagination-progress="true">
<div class="swiper-wrapper">
<?php
$args = array(
'post_type' => 'post',
'showposts' => 8,
'orderby' => 'rand',
'cat' => 28,
);
$my_query = new WP_Query( $args );
if ( $my_query->have_posts() ) {
while ( $my_query->have_posts() ): $my_query->the_post();
$post_id = get_the_ID();
$thumbnail_id = get_post_thumbnail_id( $post_id ); // 获取图片ID
?>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<?php echo wp_get_attachment_image( $thumbnail_id, 'three', false, array(
'alt' => get_the_title(),
) ); ?>
<div class="opacity-extra-medium bg-gradient-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-13 pb-13 md-p-10 d-flex align-items-center justify-content-center flex-column">
<div class="box-overlay bg-gradient-dark-transparent"></div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"> </div>
<a href="<?php the_permalink(); ?>" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a> </div>
</div>
<div class="card-body px-0 pt-30px pb-30px"> <a href="<?php the_permalink(); ?>" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 text-uppercase"><?php echo wp_trim_words( get_the_title(), 5, ' ...' ); ?></a>
<p class="mb-10px w-95"><?php echo mb_strimwidth( wp_strip_all_tags( get_the_content() ), 0, 130, '...' ); ?></p>
<span class="fs-13 text-end mb-5px d-block"><a href="<?php the_permalink(); ?>" class="blog-date text-dark-gray-hover"><?php the_time('M-d-y'); ?></a></span> </div>
<!-- end interactive banner item -->
</div>
<?php endwhile; wp_reset_postdata(); } ?>
</div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets d-block d-sm-none"></div>
<div class="row align-items-center justify-content-between">
<div class="col-md-5 swiper-pagination-wrapper d-flex align-items-center mt-25px">
<div class="number-prev fs-14 fw-600 text-dark-gray"></div>
<div class="swiper-pagination-progress bg-extra-medium-gray"> <span class="swiper-progress"></span> </div>
<div class="number-next fs-14 fw-600 text-dark-gray"></div>
</div>
<div class="col-md-5"><a href="<?php bloginfo('url'); ?>/blog" class="border-1 mt-2 btn btn-large btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto border-color-dark-gray">View all <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"></path>
</svg></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
