我想知道是否有人可以帮我解决我遇到的bxslider问题。我正在创建一个Wordpress站点并使用jQuery bxslider而不是插件版本。加载网站时,滑块的所有内容都很好,但是当您离开主页转到另一个页面,然后返回时滑块被破坏。
当我说破坏时,两张幻灯片都显示出来并且JavaScript已停止。我使用Bootstrap 3作为主题的框架。
我不习惯在这里发帖,很抱歉如果我犯了错误,请随时纠正。
任何帮助将不胜感激。
非常感谢
<div class="container">
<section class="row" id="slidercontainer">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="sliderholder">
<ul class="bxslider">
<?php
global $post;
$args = array('numberposts' => 4, 'category' => 2, 'post_status'=>"publish");
$myposts = get_posts($args);
foreach($myposts as $post) : setup_postdata($post);
?>
<li id="post-<?php the_ID(); ?>" class="slider-item">
<h1><?php echo get_the_title();?></h1>
<?php
$imageArray = get_field('slider_image'); // Array returned by Advanced Custom Fields
$imageAlt = $imageArray['alt']; // Grab, from the array, the 'alt'
$imageThumbURL = $imageArray['sizes']['postslider']; //grab from the array, the 'sizes', and from it, the 'thumbnail'
?>
<img class="pull-right" src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>">
<?php
$content = apply_filters( 'the_excerpt', get_the_excerpt() );
$content = str_replace( ']]>', ']]>', $content );
?>
<div class="slider-content"><?php echo $content;?></div>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
</div>
</section>
</div>
<!-- JavaScript -->
$(document).ready(function(){
$('.bxslider').bxSlider({
maxSlides: 4,
pager: false,
auto: true,
autoHidePager: true,
pause: 10500,
controls: true,
speed: 1800,
mode: 'horizontal'
});
});