bootstrap旋转木马图像一个在另一个下面

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> 

Answer 2

嘿，当我在另一个项目中尝试它也起作用时，我也遇到了同样的问题，但是仍然无法在我的项目中工作。如果有人可以帮助我尝试多次卸载并重新安装它，这将非常有用，一旦我们单击该图像，它就会变成我猜很活跃