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文件

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: