Hey there! If you’re looking to add a sleek and functional content slider to your website using Bootstrap 5, you’ve come to the right place.
I remember when I first started working with Bootstrap, I was amazed at how easily it helped me build responsive, modern websites. But when I wanted to add some interactive elements like a slider, I hit a bit of a wall.
Don’t worry, I’ve got you covered. By the end of this post, you’ll be able to create a beautiful content slider with minimal effort.
Let’s dive in step by step. This will be super easy, I promise!
Step 1: Creating the Base Document
First things first, let’s create a new project folder. Inside that folder, create a file named index.html—this will be our main file for writing the HTML code. Now, let’s set up the basic HTML structure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Content Slider with Bootstrap 5</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="main-header mt-5">
<h1 class="fs-4">Content Slider for Bootstrap 5</h1>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="https://placehold.co/600x300" alt="Card Title">
<div class="card-body">
<h3 class="fs-6">Card Title</h3>
<p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>This is just a basic Bootstrap setup. The header has a title for our page, and we’ve added one card for now. We will later transform these into sliders.
You can preview this in your browser, and you should see a simple card with an image and some text.
Step 2: Adding jQuery and Light Slider Plugin
Okay, now here’s where the magic happens. To make the content slider functional, we’ll use a lightweight and easy-to-implement plugin called LightSlider. It’s a neat little tool that makes creating sliders a breeze. But before we get to that, we need to include jQuery, because LightSlider relies on it.
You can get jQuery from the CDN here:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>Next, let’s add the LightSlider CSS and JS files. You can grab these from the CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />Here’s how your index.html should look now:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
<title>Content Slider with Bootstrap 5</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="main-header mt-5">
<h1 class="fs-4">Content Slider for Bootstrap 5</h1>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="https://placehold.co/600x300" alt="Card Title">
<div class="card-body">
<h3 class="fs-6">Card Title</h3>
<p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
</body>
</html>Now, we have all the necessary dependencies ready!
Step 3: Setting Up the Slider Code
Alright, let’s turn those cards into a slider. Here’s the trick: LightSlider works well with <ul> and <li> tags. So, instead of adding the cards directly into the Bootstrap grid, we’ll create a list of cards inside an unordered list (<ul>).
This will allow us to easily create a carousel of cards that the user can scroll through.
Here’s how we can set that up:
<ul id="card-slider">
<li>
<div class="card">
<img src="https://placehold.co/600x300" alt="Card Title">
<div class="card-body">
<h3 class="fs-6">Card Title</h3>
<p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</li>
<!-- Repeat similar <li> elements for each card you want to show -->
</ul>In the example above, each <li> represents a single card, and we are repeating this for the content we want to slide through.
Step 4: Adding the Custom Script for Content Slider
Now, it’s time to get the slider moving! To activate LightSlider, we need to initialize it with a small piece of JavaScript code.
Here’s how:
<script>
$(document).ready(function(){
$('#card-slider').lightSlider();
});
</script>
This script tells LightSlider to take control of the #card-slider element and apply its slider functionality.
Final HTML Document
Here’s what your complete index.html should look like after all the changes:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
<title>Content Slider with Bootstrap 5</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="main-header mt-5">
<h1 class="fs-4">Content Slider for Bootstrap 5</h1>
</div>
</div>
</div>
<div class="row mt-4">
<ul id="card-slider">
<li>
<div class="card">
<img src="https://placehold.co/600x300" alt="Card Title">
<div class="card-body">
<h3 class="fs-6">Card Title</h3>
<p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</li>
<!-- Repeat for other cards -->
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<script>
$(document).ready(function(){
$('#card-slider').lightSlider();
});
</script>
</body>
</html>And there you have it! You’ve just built a fully functional content slider using Bootstrap 5, jQuery, and LightSlider.
A Personal Note
I’ve used this setup in a few of my past projects, and it’s always been super reliable.
Whether you’re building a portfolio, showcasing a product gallery, or just creating a fun interactive feature for your website, this simple slider can make your website a lot more engaging.
I hope you enjoy experimenting with it!
Feel free to tweak the settings in the LightSlider options if you want to add extra functionality, like auto-play, arrows, or even touch support for mobile users.
Happy coding!
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
