Link to home
Start Free TrialLog in
Avatar of Adam
AdamFlag for United Kingdom of Great Britain and Northern Ireland

asked on

My bootstrap carousel arrow indicators are not displaying. Don't understand why

Hi all,

I've pasted an example carousel from bootstrap's page of examples. I'm using bootstrap v4 and the carousel text I copied was also from bootstrap 4. However, when I view the carousel, the arrow indicators don't seem to be displayed. I assume the following part of the code relates to them:

<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>

Open in new window


I have not specified these classes in my css styles file but assumed as they are part of the v4 framework I wouldn't need to.

The entire code is here:

<!DOCTYPE html><!-- Orangutan Japan - Orangutan English Site -->
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	
    <!-- Bootstrap CSS __ these are needed to get the bootstrap framework to appear-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
 	<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'> 
 	
 	<link rel="stylesheet" href="css/OJ_styles.css"><!-- My setup CSS -->
 	<link rel="stylesheet" href="font-awesome/css/font-awesome.css"><!-- Font Awesome CSS - Needs to be in the 'font awesome' folder and allows you to add font awesome classes and images -->
	<link rel="stylesheet" href="css/animate.min.css"><!-- Animate CSS ---need to be in CSS folder to allow you to add animation --> 
	
  </head>
  <body>
  
  <div class="container">
  


    		
        		<div id="myCarousel" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                  <img class="first-slide" src="chicago.jpg"" alt="First slide">
                  <div class="container">
                    <div class="carousel-caption d-none d-md-block text-left">
                      <h1>What we offer 1</h1>
                      <p>some random text 1</p>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="second-slide" src="ny.jpg"" alt="Second slide">
                  <div class="container">
                    <div class="carousel-caption d-none d-md-block">
                      <h1>What we offer 2</h1>
                      <p>more random text 2</p>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="third-slide" src="la.jpg" alt="Third slide">
                  <div class="container">
                    <div class="carousel-caption d-none d-md-block text-right">
                      <h1>What we offer 3</h1>
                      <p>more random text 3</p>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                    </div>
                  </div>
                </div>
              </div>
             
			  <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
			 
            </div>

</div><!-- end container -->
 
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
  <script src="js/wow.min.js"></script> <!--this is the animate js script we need this for the wow animation -->
  <script> new WOW().init();</script>
  
</body>
</html>

Open in new window


This is the image I see when I view locally. There are no arrows allowing me to navigate between the carousel images

Many thanks.

User generated image
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Adam

ASKER

Many thanks Julian, lenamtl

Yes, after looking at some of the other options I've decided to hold back on the carousel for the site until a stable version of bootstrap 4 is available. I've done all my site up to now in bootstrap 4.5, so hopefully when a stable version is released I'll use that and most of the site will still work.

Sorry for the slow reply and thanks for your help.