CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-3carousel
Joseph Raphael
Joseph Raphael

Reputation: 348

bootstrap carousel active indicator onclick doesn't pause

I am using bootstrap carousel, I adjusted the functionality for it to work with hover

The Problem: When I CLICK on any of the circle images it scroll to the next one

Expected behaviour: It should stay on the current slide (pause)

what is the function I should use to change this onclick behaviour

Live version here: 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>

What I need ?

Upvotes: 0

Views: 306

Answers (1)

sertsedat
sertsedat

Reputation: 3600

The problem is your li elements have attributes like

data-slide-to="1"

Instead of starting with 1, start them with zero so the clicks will work fine.

https://jsfiddle.net/yc7zcrtp/

Upvotes: 1

Related Questions