custom slider 在前端获取slider
Published
2022-05-19
浏览次数 : 203
//首先要导入swiper.js并且通过js初始化
//https://swiperjs.com/get-started
function _theme_get_slider() {
$slider_args = array('post_type' => 'tie_slider');
$custom_slider = new WP_Query($slider_args); ?>
<div class="slider__area grey-bg-8 swiper mySwiper swiper-fade swiper-initialized swiper-horizontal swiper-pointer-events swiper-watch-progress swiper-backface-hidden">
<div class="swiper-wrapper" id="swiper-wrapper-ae8149da629dc733" aria-live="polite" style="transition-duration: 0ms;">
<?php
while($custom_slider->have_posts()){
$number = 0;
$custom_slider->the_post();
$custom = get_post_custom( get_the_ID() );
if (!empty($custom['custom_slider'][0])) {
$slider = unserialize($custom['custom_slider'][0]);
$image = wp_get_attachment_image( $slider[1]['id']);
foreach($slider as $slide) {
$image = wp_get_attachment_image_url( $slide['id']); ?>
<div class="swiper-slide" role="group" aria-label="1 / 4" style="width: 1920px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
<img src="<?php echo $image; ?>">
</div>
<?php
}
}
} ?>
</div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-ae8149da629dc733" aria-disabled="false"></div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-ae8149da629dc733" aria-disabled="false"></div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 3" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
<?php
}
- 标签1
- 标签1
- 标签1