Collapse plugin and carousel plugin


Wrap

Change the visibility of content throughout your project with a few classes with our JavaScript plugins.

For example

Click the buttons below to display and hide something else with class changes:

.close hides content

. wrap is used during the transition

.close.show shows content

You can use the link with the href attribute, or the button with the target data. In both cases, data-toggle = "collapse" is required.

Example of Collapse plugin

<p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Connect with href </a> <button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "# collapseExample" aria-expanded = "false" aria-controls = "collapseExample"> Data target button </button> </p> <div class = "collapse" id = "collapseExample"> <div class = "card-body body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>

OUTPUT :

collapse

How to make a carousel

The following example shows how to create a basic carousel:

For example

<div class="container"> <div class="row py-5"> <div class="col"> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> </div> </div> </div> </div>

OUTPUT :

carousel