forum

home / developersection / forums / slider with the help of bootstrap classes

Ask Question

Slider with the help of Bootstrap classes

Ethan Karla 341 28-Jul-2021

How to make slider with the help of bootstrap classes?

bootstrap bootstrap 
Updated on 28-Nov-2023
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

28-Nov-2023

Certainly! Bootstrap provides a component called Carousel that you can use to create a slider. Here's a simple example of how to create a slider using Bootstrap classes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Slider Example</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <!-- Bootstrap JS and Popper.js (required for Bootstrap components) -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

</body>
</html>

In this example:

  • The carousel class is applied to create a carousel (slider) component.
  • carousel-inner contains individual slides (carousel-item).
  • carousel-control-prev and carousel-control-next provide the navigation buttons for previous and next slides.
  • The data-bs-target attribute specifies the target carousel, and data-bs-slide specifies the slide direction.

Make sure to replace the placeholder image URLs (https://via.placeholder.com/800x400) with your actual slide images. This example uses Bootstrap 5, so ensure you have the correct Bootstrap version included in your project.

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy