具有上一个和下一个箭头的Bootstrap轮播图像指示器

Question

我在添加带有下图所示的轮播图片指示器的上一个和下一个箭头时遇到问题。

我找到了一个示例，但是现在可以滚动了。 看到这个jsfiddle 。 我需要具有下一个和上一个箭头而不是滚动条的这种旋转木马。 怎么做？

提前致谢。

<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
        <div class='item active'>
            <img src='http://placehold.it/400x200&text=slide1' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide2' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide3' alt='' />
        </div>

        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide4' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide5' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide6' alt='' />
        </div>

        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide7' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide8' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide9' alt='' />
        </div>
    </div>

    <!-- Controls -->
    <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
        <span class='glyphicon glyphicon-chevron-left'></span>
    </a>
    <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
        <span class='glyphicon glyphicon-chevron-right'></span>
    </a>
</div>

<!-- Indicators -->
<ol class='carousel-indicators'>
    <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='3'><img src='http://placehold.it/100x50&text=slide4' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='5'><img src='http://placehold.it/100x50&text=slide6' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='6'><img src='http://placehold.it/100x50&text=slide7' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='7'><img src='http://placehold.it/100x50&text=slide8' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='8'><img src='http://placehold.it/100x50&text=slide9' alt='' /></li>
</ol>

Answer 1

选中此选项，它的效果很好！！！，我想您已经错过了包括jquery或bootstrap文件的信息

 .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev { position: absolute; top: 83% !important; z-index: 5; display: inline-block; margin-top: -10px; } h4 { margin: 20px 10px 10px; } p { margin: 10px; } #carousel-example-generic { margin: 20px auto; width: 400px; } #carousel-custom { margin: 20px auto; width: 400px; } #carousel-custom .carousel-indicators { margin: 10px 0 0; overflow: auto; position: static; text-align: left; white-space: nowrap; width: 100%; } #carousel-custom .carousel-indicators li { background-color: transparent; -webkit-border-radius: 0; border-radius: 0; display: inline-block; height: auto; margin: 0 !important; width: auto; } #carousel-custom .carousel-indicators li img { display: block; opacity: 0.5; } #carousel-custom .carousel-indicators li.active img { opacity: 1; } #carousel-custom .carousel-indicators li:hover img { opacity: 0.75; } #carousel-custom .carousel-outer { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> <div id='carousel-custom' class='carousel slide' data-ride='carousel'> <div class='carousel-outer'> <!-- Wrapper for slides --> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/400x200&text=slide1' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide2' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide3' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide4' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide5' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide6' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide7' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide8' alt='' /> </div> <div class='item'> <img src='http://placehold.it/400x200&text=slide9' alt='' /> </div> </div> </div> <!-- Controls --> <a class='left carousel-control' href='#carousel-custom' data-slide='prev'> <span class='glyphicon glyphicon-chevron-left'></span> </a> <a class='right carousel-control' href='#carousel-custom' data-slide='next'> <span class='glyphicon glyphicon-chevron-right'></span> </a> <!-- Indicators --> <ol class='carousel-indicators'> <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='3'><img src='http://placehold.it/100x50&text=slide4' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='5'><img src='http://placehold.it/100x50&text=slide6' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='6'><img src='http://placehold.it/100x50&text=slide7' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='7'><img src='http://placehold.it/100x50&text=slide8' alt='' /></li> <li data-target='#carousel-custom' data-slide-to='8'><img src='http://placehold.it/100x50&text=slide9' alt='' /></li> </ol> </div>