Ad

Left And Right Controls Not Working In Carousel Bootstrap 4.1

- 1 answer

I want to create a slideshow that doesn't have automatic cycling. I just want to control cycling manually by clicking the arrows.

However the left and right controls don't work.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" target="_blank" rel="nofollow noreferrer" href="#carouselExampleControls" 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" target="_blank" rel="nofollow noreferrer" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>

Does anyone know why?

Ad

Answer

You have given target="_blank" rel="nofollow noreferrer" href="#carouselExampleControls" in carousel-control.

So put this href as id of main div

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" ">

 <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block w-100 img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100 img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" target="_blank" rel="nofollow noreferrer" href="#carouselExampleControls" 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" target="_blank" rel="nofollow noreferrer" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Ad
source: stackoverflow.com
Ad