Buttons - ID - Carousel not working

Asked

Viewed 319 times

0

I don’t know much about jQuery, but what might be going on?

I just wish the arrows could work properly, don’t mind the style.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Teste Caroulsel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<style type="text/css">
	/* carousel */
#quote-carousel {
  padding: 0 10px 30px 10px;
  margin-top: 30px;
  text-align:center;
}
/* indicator position */
#quote-carousel .carousel-indicators {
  right: 50%;
  top: auto;
  bottom: -10px;
  margin-right: -19px;
}
/* indicator color */
#quote-carousel .carousel-indicators li {
  background: #c0c0c0;
}
/* active indicator */
#quote-carousel .carousel-indicators .active {
  background: #333333;
  height:10px;
  width:10px;
  margin-bottom:1px;
}
/* typography */
h1 {
  text-align:center;
  margin-bottom:-20px !important;
}
p {
  font-style:italic;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>

<h1>Malesuada</h1>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide" data-ride="carousel" id="quote-carousel">
      
		<!-- Bottom Carousel Indicators -->
		<ol class="carousel-indicators">
		  <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
		  <li data-target="#quote-carousel" data-slide-to="1"></li>
		  <li data-target="#quote-carousel" data-slide-to="2"></li>
		</ol>
		        
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">

		<!-- Quote 1 -->
		<div class="item active">
		  <div class="row">
		    <div class="col-sm-12">
		      <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.&rdquo;</p>
		      <small><strong>Vulputate M., Dolor</strong></small>
		    </div>
		  </div>
		</div>

		<!-- Quote 2 -->
		<div class="item">
		  <div class="row">
		    <div class="col-sm-12">
		      <p>&ldquo;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.&rdquo;</p>
		      <small><strong>Fringilla A., Vulputate Sit</strong></small>
		    </div>
		  </div>
		</div>

		<!-- Quote 3 -->
		<div class="item">
		  <div class="row">
		    <div class="col-sm-12">
		      <p>&ldquo;Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.&rdquo;</p>
		      <small><strong>Aenean A., Justo Cras</strong></small>
		    </div>
		  </div>
		</div>
		  
</div>   
<style type="text/css">
.carousel-control-prev {
    left: 45%;
    background-color: #000;
    position: absolute;
    top: none;
    bottom: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%; 
}
.carousel-control-next {
    right: 45%;
    background-color: #000;
    position: absolute;
    top: none;
    bottom: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: none; 
}
</style>
 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> 
      </div>                          
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script type="text/javascript">
	// When the DOM is ready, run this function
$(document).ready(function() {
  //Set the carousel options
  $('#quote-carousel').carousel({
    pause: true,
    interval: 1000,
  });
  $('.carousel-control.prev').click(function() {
  $('#carouselExampleIndicators').carousel('prev');
});

$('.carousel-control.next').click(function() {
  $('#carouselExampleIndicators').carousel('next');
});
});


</script>
</html>

javascript jquery bootstrap

1 answer

1


Just fix the href of the buttons: href="#quote-Carousel"

  <a class="carousel-control-prev" href="#quote-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#quote-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

  • Yes! That’s right! Thank you very much!

Browser other questions tagged javascript jquery bootstrap

You are not signed in. Login or sign up in order to post.