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
Top