Question

我试图将所有特色图片显示在一个帖子类型中作为轮播，但目前所有图像都是一个低于另一个而不是幻灯片。我得到的数字如“1”，“2”。和“3.”在图像上方。

下面是我的代码。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.carousel').carousel({
        interval: 1000  
    })
});
</script>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-9">


                <div id="myCarousel" class="carousel slide" >
                <!-Indicators->
                <ol class="carousel-indicators">
                    <li class="" data-target="#myCarousel" data-slide-to="0" ></li>
                    <li class="active" data-target="#myCarousel" data-slide-to="1" ></li>
                    <li class="" data-target="#myCarousel" data-slide-to="2" ></li>
                </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <?php $arg= get_posts(array('post_type' => 'featured', 'numberposts' => -1));                               

                            foreach ( $arg as $post ) :  setup_postdata($post);
                            if (!empty($post))
                                    {                
                    ?>                  

                            <div class="item active"><a href="<?php echo get_field('link');?>"> <?php the_post_thumbnail(); ?></a></div>

                        <?php }  endforeach; ?>

                    </div>
                </div>

 <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>             

</div>

Answer 1

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.carousel').carousel({
        interval: 1000  
    })
});
</script>

<script>$(document).ready(function(){$(".carousel-inner div:first").addClass("active"); });</script>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-9">
    <div id="myCarousel" class="carousel slide" >
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li class="" data-target="#myCarousel" data-slide-to="0" ></li>
            <li class="active" data-target="#myCarousel" data-slide-to="1" ></li>
            <li class="" data-target="#myCarousel" data-slide-to="2" ></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <?php $arg= get_posts(array('post_type' => 'featured', 'numberposts' => -1));                               
                foreach ( $arg as $post ) :  setup_postdata($post);
                            if (!empty($post)) {                
            ?>                  
                <div class="item"><a href="<?php echo get_field('link');?>"> <?php the_post_thumbnail(); ?></a></div>
            <?php }  endforeach; ?>
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>             
</div>

使用JS或jQuery在运行时添加活动类，并且还使用php在第一个div图像上添加活动类。如果所有图像都处于活动状态，则活动类意味着所有图像都处于活动状态

希望这会有所帮助。如果您有疑问，或者您不理解某事，请随时提出。

引导旋转木马图像来到另一个下面

1 个答案: