引导轮播活动指示器 onclick 不会暂停答案

【问题标题】：bootstrap carousel active indicator onclick doesn't pause引导轮播活动指示器 onclick 不会暂停
【发布时间】：2016-05-21 10:22:15
【问题描述】：

我正在使用引导轮播，我调整了它的功能以使其与悬停一起使用

问题：当我点击任何圆形图像时，它会滚动到下一个

预期行为：它应该停留在当前幻灯片上（暂停）

我应该使用什么函数来更改此 onclick 行为

现场版在这里： http://designs.josephr.mobi/test/

$('.carousel').carousel({
  interval: 299999
})
$(".carousel").click(function(){
  $('.carousel').carousel('pause');
});

html, body {padding:0; margin:0; width:100%;}
.carousel-inner > .item {
    -webkit-transition: 0.1s ease-in-out left ;
    -moz-transition: 0.1s ease-in-out left ;
    -o-transition: 0.1s ease-in-out left ;
    transition: 0.1s ease-in-out left ;
}
#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 30px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-control.left {
    left: -60px;
}
#quote-carousel .carousel-control.right {
    right: -60px;
}
#quote-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
	position:relative !important;
}
#quote-carousel .carousel-indicators li {
    width: 128px;
    height: 128px;
    margin: 5px;
    cursor: pointer;
    border-radius: 50px;
    opacity: 0.4;
    overflow: hidden;
    transition: all 0.1s;
}
#quote-carousel .carousel-indicators li.active {
    background: white;
    border-radius: 100px;
    opacity: 1;
    overflow: hidden;
	border:3px solid #FFBC00;
}
#quote-carousel .carousel-indicators li.active img {
	cursor:default;
}
#quote-carousel .carousel-indicators li img {
	cursor:default;
}
.carousel-inner {
    min-height: 240px;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}

@media only screen and (max-width: 991px) {
	#quote-carousel .carousel-indicators li { width:92px; height:92px; }
	.carousel-inner {  min-height: 240px; }
}

@media only screen and (max-width: 401px) {
	#quote-carousel .carousel-indicators li { width:72px; height:72px; }
	.carousel-inner {  min-height: 240px; }
}

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
	 <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Carousel with face indicators</title>

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">


</head>
<body>
	

<div class="container-fluid" id="cr">
<div class="row">

                    <div class="col-md-12" data-wow-delay="0.01s">
                        <div class="carousel slide" data-ride="carousel" id="quote-carousel">

                            <!-- Carousel Slides / Quotes -->
                            <div class="carousel-inner text-center">

                                <!-- Quote 1 -->
                                <div class="item active">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 1 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 1</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>

                                <!-- Quote 2 -->
                                <div class="item">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 2 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 2</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>

                                <!-- Quote 3 -->
                                <div class="item">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 3 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 3</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>

                                <!-- Quote 4 -->
                                <div class="item">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 4 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 4</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>

                                <!-- Quote 5 -->
                                <div class="item">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 5 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 5</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>

                                <!-- Quote 6 -->
                                <div class="item">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 6 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 6</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>
                                
                                <!-- Quote 7 -->
                                <div class="item">
                                    <blockquote>
                                        <div class="row">
                                            <div class="col-sm-8 col-sm-offset-2">
												<!-- Quote 7 test -->
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                                <small>perseon name 7</small>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>
                                
                            </div>
                            
                            
                            <!-- Bottom Carousel Images -->
                            <ol class="carousel-indicators">
                                <!-- Image 1 -->
                                <li data-target="#quote-carousel" data-slide-to="1" onMouseOver="$('.carousel').carousel(0); $('.carousel').carousel('pause');" class="active"><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 1"></li>
                                <!-- Image 2 -->
                                <li data-target="#quote-carousel" data-slide-to="2" onMouseOver="$('.carousel').carousel(1); $('.carousel').carousel('pause');" ><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 2"></li>
                                <!-- Image 3 -->
                                <li data-target="#quote-carousel" data-slide-to="3" onMouseOver="$('.carousel').carousel(2); $('.carousel').carousel('pause');" ><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 3"></li>
                                <!-- Image 4 -->
                                <li data-target="#quote-carousel" data-slide-to="4" onMouseOver="$('.carousel').carousel(3); $('.carousel').carousel('pause');" ><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 4"></li>
                                <!-- Image 5 -->
                                <li data-target="#quote-carousel" data-slide-to="5" onMouseOver="$('.carousel').carousel(4); $('.carousel').carousel('pause');" ><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 5"></li>
                                <!-- Image 6 -->
                                <li data-target="#quote-carousel" data-slide-to="6" onMouseOver="$('.carousel').carousel(5); $('.carousel').carousel('pause');"  ><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 6"></li>
								<!-- Image 7 -->
                                <li data-target="#quote-carousel" data-slide-to="6" onMouseOver="$('.carousel').carousel(6); $('.carousel').carousel('pause');" ><img class="img-responsive" src="http://designs.josephr.mobi/test/c.png" alt="Name 7"></li>
                            </ol>   
                            
                            <!-- Carousel Buttons Next/Prev
                            <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                            <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> -->
                        </div>
                    </div>
                </div>
</div>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

我需要什么？

点击当前 .active 图片时，我不希望轮播切换到下一张图片。

【问题讨论】：

您能否分享一些您的代码，以便我们知道可能是什么问题，而不是通过页面搜索
@jackjop 刚刚添加了 sn-p

标签： javascript twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

问题是你的 li 元素有类似的属性

data-slide-to="1"

不要从 1 开始，而是从零开始，这样点击就可以正常工作。

https://jsfiddle.net/yc7zcrtp/

【讨论】：