I'm currently stuck on a portion of my project where I can't seem to make this carousel shift between each image. The code looks like this right now:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href = "css/style.css" rel = "stylesheet" type = "text/css">
<title>Document</title>
</head>
<body>
<main id = "main-text">
<nav class = 'navbar navbar-dark bg-dark'>
<div id = 'top-nav' class = 'container'>
<img src = '/vapeShop/images/img1.png' alt = '' width = '15%' height = '15%'>
<a id = 'nav-link light' class = 'navbar link' href = '#'>
Brand Name
</a>
<a id = 'nav-link light' class = 'navbar-link' href = '#'>
Locations
</a>
</div>
</nav>
<div id="topCarousel" class="carousel slide mt-4 bg-dark" data-ride = 'carousel'>
<div class="carousel-inner">
<div class="carousel-item active">
<img id = 'carousel-imgs' class="d-block w-100" src="/vapeShop/images/img2.png" alt="First slide">
</div>
<div class="carousel-item">
<img id = 'carousel-imgs' class="d-block w-100" src="/vapeShop/images/img3.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img id = 'carousel-imgs' class="d-block w-100" src="/vapeShop/images/img4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#topCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#topCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</main>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src = "js/app.js"></script>
</html>
The carousel is just refusing to go onto the next picture whenever I click on the chevrons. Is there something that I'm missing?
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Document</title>
</head>
<body>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<main id="main-text">
<nav class='navbar navbar-dark bg-dark'>
<div id='top-nav' class='container'>
<img src='/vapeShop/images/img1.png' alt='' width='15%' height='15%'>
<a id='nav-link light' class='navbar link' href='#'>
Brand Name
</a>
<a id='nav-link light' class='navbar-link' href='#'>
Locations
</a>
</div>
</nav>
<div id="topCarousel" class="carousel slide mt-4 bg-dark" data-ride='carousel'>
<div class="carousel-inner">
<div class="carousel-item active">
<img id='carousel-imgs' class="d-block w-100" src="/vapeShop/images/img2.png" alt="First slide">
</div>
<div class="carousel-item">
<img id='carousel-imgs' class="d-block w-100" src="/vapeShop/images/img3.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img id='carousel-imgs' class="d-block w-100" src="/vapeShop/images/img4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</main>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</html>
You just need to add data-bs-target="#topCarousel" data-bs-slide="prev" Attributs in next previous Links.
<a class="carousel-control-prev" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
Related
I am not sure why the below does not work. I'm currently doing a web development course on udemy. I tried to apply a carousel with controls, but it does not seem to work.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<section id="testimonials">
<div id="carousel-testimonials" class="carousel slide " data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="dog-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item ">
<h2 id="testimonial-text" class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of
their
life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-testimonials" 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="#carousel-testimonials" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
This is a working a Example from the Bootstrap website. Hope this helps you. Just change the SRC to the image you wish!
I have done this in Bootstrap 5 since it is the latest. See below your example fixed in Bootstrap 4. Possibly you left out the JS includes.
Hope this helps!
<!doctype html>
<html lang="en">
<head>
<title>StackOverflow</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>Item 1</p>
<img src="http://via.placeholder.com/640x360
" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<p>Item 2</p>
<img src="http://via.placeholder.com/640x360
" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<p>Item 3</p>
<img src="http://via.placeholder.com/640x360
" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Using Bootstrap 4 and your code;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<section id="testimonials">
<div id="carousel-testimonials" class="carousel slide " data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>Slide 1</h2>
<img class="dog-image" src="https://www.fillmurray.com/640/360
" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item ">
<h2 id="testimonial-text" class="testimonial-text">Slide 2</h2>
<img class="testimonial-image" src="https://www.fillmurray.com/640/360
" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-testimonials" 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="#carousel-testimonials" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
4 carousel with control example try replacing the content and img. Hopefully this will work also ensure to link the bootstrap-4 cdn in the script tag :)
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div> <a class="carousel-control-prev" 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" 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>
Hello guys so I'm trying to use carousel from Bootstrap by just copying the code without changing anything, but for some reason the carousel didn't work (can't move to next slide). Anyone knows how to fix this? and also, does anyone know how to make the carousel size smaller? Thanks in advance.
Here's my code:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Script for Font Awesome, jquerycdn -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<!-- jQuery, Popper.js, and Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placekitten.com/g/500/500" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://placekitten.com/g/500/500" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
You can try this way:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
So I've been trying to make a portfolio website in Django, I've been following some tutorial for this.
The Carousel on my page doesn't seem to change images when clicking next/previous button. The images displays properly (need to resize it for appropriate looks) but no matter what I do it won't show next/previous image.
I am providing the carousel code and the whole html code:
Carousel code:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" 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" 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>
Whole HTML code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">OMEGA</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/project">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First
slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second
slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third
slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" 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" 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>
<!-- <h1>Hello, world!</h1> -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
-->
</body>
</html>
Try to remove "active" from second and third img tags in your carousel code
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" 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" 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>
To
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" 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" 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>
Change data-ride and data-slide to data-bs-ride and data-bs-slide. In bootstrap 5 data-ride and data-slide don't work anymore.
Solution 1
As your are using bootstrap 5, you must use data-bs-ride="carousel" and data-bs-slide="carousel" at the places of data-ride="carousel and data-slide="carousel. After that The .active class needs to be added to one of the slides otherwise the carousel will not be visible so remove it for the second and the third slide.
Link: Bootstrap 5 carousel with indicators
Solution 2
Just change the version of your bootstrap to 4 and remenber to set .active class for only one slide.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I copied the code from Bootstrap website to create a simple carousel but it's not working, I don't understand why because I included Bootrap css, jquery and Bootstrap js from a CDN, here is the code of my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kebabus</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" 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" 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>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
</body>
</html>
I have the following error in my browser console:
TypeError: f[0] is undefined
The problem in your snipet was that you used a version 3 bootstrap javascript with a version 4 html markup.
There you go, this is the v4 bootstrap carousel:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kebabus</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" 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" 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>
</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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval: 2000
});
</script>
</body>
</html>
I need to position a caption below a basic slider in Bootstap4.
This is my HTML code
<div class="col-xs-12 col-sm-6 col-md-5" style="float:right; padding:0;">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/1.jpg" alt="First slide">
<div class="newcaption">
<p>First caption</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/2.jpg" alt="Second slide">
<div class="newcaption">
<p>Second caption</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/3.jpg" alt="Third slide">
<div class="newcaption">
<p>Third caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" 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" 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>
</div>
First, my css is
.carousel-inner{position:relative; width:100%; overflow:hidden;}
.newcaption{position:absolute; bottom:-25px; top:auto; color:#000;}
Then it turn like this
https://ibb.co/nG3rhw
(Sory, I had reputation not enough to post images.)
Then I changed overflow: "hidden" to "visible" in .carousel-inner . Now it work but it show 2 images while change image like this
https://ibb.co/dd7v9b
So how can I position a caption in this issue?
See css working with following code, Run code snippet and check result.
.carousel-inner{position:relative; width:100%; overflow:hidden}
.newcaption{position:absolute; bottom:5px; top:auto; color:#000; left:5px}
.newcaption p{ margin:0px}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-6 col-md-5" style="float:right; padding:0;">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
<div class="newcaption">
<p>First caption</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
<div class="newcaption">
<p>Second caption</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
<div class="newcaption">
<p>Third caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" 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" 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>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-xs-12 col-sm-6 col-md-5" style="float:right; padding:0;">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="First slide">
<div class="newcaption">
<p>First caption</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Second slide">
<div class="newcaption">
<p>Second caption</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Third slide">
<div class="newcaption">
<p>Third caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" 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" 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>
</div>
<style>
.carousel-inner{position:relative; width:100%; overflow:hidden;}
.newcaption{position:absolute; bottom:2px; top:auto; color:#000; left:5px;}
.newcaption p{ margin:0px; }
</style>
</body>
</html>