Bootstrap Carousel

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Carousel

Post by C0D3D »

Creating carousels with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Carousel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
        
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>

        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
</body>
</html>
Adding captions to Bootstrap carousel items

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Carousel with Captions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
        
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some demonstrative placeholder content for the first slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Some demonstrative placeholder content for the second slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Some demonstrative placeholder content for the third slide.</p>
                </div>
            </div>
        </div>

        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    
    <div class="alert alert-info mt-3">
        Carousel caption will be hidden on smaller viewport, but become visible on medium devices (i.e. viewport width &ge;768px). Change orientation of this HTML editor to see how it works. 
    </div>
</div>
</body>
</html>

Creating dark variant of Bootstrap carousel

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Carousel Dark Variant</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
        
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1-light.png" class="d-block w-100" alt="Slide 1">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some demonstrative placeholder content for the first slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2-light.png" class="d-block w-100" alt="Slide 2">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Some demonstrative placeholder content for the second slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3-light.png" class="d-block w-100" alt="Slide 3">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Some demonstrative placeholder content for the third slide.</p>
                </div>
            </div>
        </div>

        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    
    <div class="alert alert-info mt-3">
        Carousel caption will be hidden on smaller viewport, but become visible on medium devices (i.e. viewport width &ge;768px). Change orientation of this HTML editor to see how it works. 
    </div>
</div>
</body>
</html>

Activate Bootstrap carousels via data attributes

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Activate Bootstrap Carousel via Data Attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
</body>
</html>

Activate Bootstrap carousels via JavaScript

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Activate Bootstrap Carousel via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element);
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    
    <div class="alert alert-info mt-3">
        Note that <code>#myCarousel</code> element doesn't contain the <code>data-bs-ride="carousel"</code> attribute. Because we're activating the carousel on page load via JavaScript.
    </div>
</div>
</body>
</html>

Removing auto-sliding from Bootstrap carousel via JavaScript

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disable Bootstrap Carousel Autoplay via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element, {
        interval: false
    });
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
</body>
</html>

Bootstrap cycle() carousel method

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

    // Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

	// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

	// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Carousel without any controls -->
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

    <!-- Carousel controls buttons -->
    <div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>
Bootstrap pause() carousel method

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

    // Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

	// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

	// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Carousel without any controls -->
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

    <!-- Carousel controls buttons -->
    <div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>

Bootstrap prev() carousel method

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

    // Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

	// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

	// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Carousel without any controls -->
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

    <!-- Carousel controls buttons -->
    <div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>


Bootstrap next() carousel method

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

    // Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

	// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

	// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Carousel without any controls -->
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

    <!-- Carousel controls buttons -->
    <div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>
Bootstrap nextWhenVisible() carousel method

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

    // Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

	// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

	// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Carousel without any controls -->
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

    <!-- Carousel controls buttons -->
    <div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>

Bootstrap to() carousel method

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

    // Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

	// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

	// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Carousel without any controls -->
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

    <!-- Carousel controls buttons -->
    <div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>

Bootstrap dispose() carousel method

Example 13

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dispose Bootstrap Carousel Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function(){
        var myCarousel = bootstrap.Carousel.getInstance(element);
        console.log(myCarousel);

        myCarousel.dispose();
        console.log(myCarousel);
    });
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
  	<div class="text-center mt-4">
      <p><button type="button" class="btn btn-danger btn-lg" id="myBtn">Dispose Carousel</button></p>
      <p>Once carousel start sliding, you can press the "Dispose Carousel" button to remove the carousel data stored on the DOM element.</p>
      <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    </div>
</div>
</body>
</html>


Bootstrap getInstance() carousel method

Example 14

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Carousel Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function() {
        var myCarousel = bootstrap.Carousel.getInstance(element);
        console.log(myCarousel);
    });
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
  	<div class="text-center mt-4">
      <p><button type="button" class="btn btn-primary btn-lg" id="myBtn">Get Carousel Instance</button></p>
      <p>Once carousel start sliding, you can press the "Get Carousel Instance" button to get the carousel instance associated with a DOM element.</p>
      <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    </div>
</div>
</body>
</html>

Bootstrap getOrCreateInstance() carousel method

Example 15

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get Bootstrap Carousel Instance Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function() {
        var myCarousel = bootstrap.Carousel.getOrCreateInstance(element);
        console.log(myCarousel);
    });
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
  	<div class="text-center mt-4">
      <p><button type="button" class="btn btn-primary btn-lg" id="myBtn">Get or Create Carousel Instance</button></p>
      <p>Press the "Get or Create Carousel Instance" button to create carousel instance or get the carousel instance associated with a DOM element.</p>
      <p>Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.</p>
    </div>
</div>
</body>
</html>

Display a message when sliding of a Bootstrap carousel item has been completed

Example 16

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listening to Carousel Events Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCarousel = document.getElementById("myCarousel");

    myCarousel.addEventListener("slid.bs.carousel", function(){
        alert("The sliding transition of previous carousel item has been fully completed.");
    });
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    
        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot] and 0 guests