CODEWITHSUNDEEP
htmlcssbootstrap-4frontendcarousel
user3464895
user3464895

Reputation:

Bootstrap v4: carousel dissapear after first slide :(

(NB: I am a student and learning ,pls gentlmens do not be mad on the question,thx.)

Long story short:

I have my bootstrap v4 carousel *(https://getbootstrap.com/docs/4.0/components/carousel/). I integrated it on my website header aworks great ,but the carousel dissapear after 1st slide.

Tried take off container class ,thought maybe conflicting with carousel position but no,didn t helped.

(Was searching on bootstrap ,on stackoverflow ,nada :( )

Designers ,could you please help me out ?

Thanks in advance.

P.s. images are same size.

HEADER CODE PART:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=noS">
 <title>Home</title>

 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  
 <!-- Custom styles for this template -->
 <link href="css/business-frontpage.css" rel="stylesheet">
 <!-- Latest compiled and minified CSS -->
 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Italianno&display=swap" rel="stylesheet"> 
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Bienvenue  </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Accueil
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">text</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>   
        </ul>
      </div>
    </div>
    <form class="form-inline my-2 my-lg-0">
            <a class="nav-link" href="#">ENG</a>
            <a class="nav-link" href="#">GER</a>
            <a class="nav-link" href="#">FR</a>
    </form>  
</nav>
   
<!-- Header -->
<!-- carousel -->
  <header class="bg-primary bg-dark py-3 mb-5">
    <div class="container h-100">   
     <div id="carousel" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators"> 
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
     </ol>
         
     <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="1.jpg"  class="img-fluid">
            <div class="carousel-item">
            <img src="11.jpg" class="img-fluid">
          </div>
        </div>

        <a class="left carousel-control" href="carousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
        </span></a>
      </div>
      
      <div class="main-text hidden-xs">
        <div class="col-md-12">
            <p class="h1"><span><b>text</b></span></p><h1 class="text-white"><span><b>&nbsp &nbsp &nbsp text</b></span></h1></b>
        </div>
      </div>
        </header>
<!-- carousel -->

enter image description here

enter image description here

Upvotes: 1

Views: 44

Answers (1)

Rich DeBourke
Rich DeBourke

Reputation: 3423

The carousel code you have is for Bootstrap 3 (Bootstrap 3 uses glyphicons while Bootstrap 4 uses SVGs). You didn’t include the CSS or JS you’re using, so I’m not sure what version of those you’re using.

I combined the Bootstrap 4 carousel with your navbar in the snippet so you can see it in operation. Since you’re using fixed-top on the navbar, you’ll need to include extra margin on the first section to have it spaced below the navbar (I added 4.5rem).

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Bienvenue </a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Accueil
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Service</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">text</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
        <form class="form-inline my-2">
            <a class="nav-link px-2" href="#">ENG</a>
            <a class="nav-link px-2" href="#">GER</a>
            <a class="nav-link px-2" href="#">FR</a>
        </form>
    </div>
</nav>

<!-- Header -->
<!-- carousel -->
<header class="bg-primary bg-dark py-3 mb-5" style="margin-top: 4.5rem;">
    <div class=" container h-100">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://via.placeholder.com/1110x380.png/0000FF/FFFFFF?text=Slide+1" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://via.placeholder.com/1110x380.png/00FFFF/FFFFFF?text=Slide+2" class="d-block w-100" alt="...">
                </div>
            </div>
            <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 class="main-text hidden-xs">
            <div class="col-md-12">
                <p class="h1"><span><b>text</b></span></p>
                <h1 class="text-white"><span><b>&nbsp &nbsp &nbsp text</b></span></h1>
            </div>
        </div>
    </div>
</header>
<!-- carousel -->

It's best, when asking a question related to web design, to use the snippet tool.

Upvotes: 1

Related Questions