Question

我正在使用bootstrap carousel，我调整了它的功能以使用悬停

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

预期行为：它应保持当前幻灯片（暂停）

我应该使用什么功能来改变这种onclick行为

在线直播版 http://designs.josephr.mobi/test/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我需要什么？

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

Answer 1

问题是你的li元素有像

这样的属性

data-slide-to="1"

不是以1开头，而是以零开头，这样点击就可以了。

https://jsfiddle.net/yc7zcrtp/

bootstrap carousel活动指示器onclick不会暂停

1 个答案: