Hi, welcome. In this tutorial, you will learn How to Create a Content Slider in Bootstrap 5. By default Bootstrap 5 has this carousel, through which you can create image sliders and content sliders. But, it’s not that great.
For example, if you check out the default image slider or content slider it’s kind of old and not that great looking. So, in this tutorial, we will learn how to create an awesome and lightweight image and content slider for your projects.
Set up project for Content Slider in Bootstrap 5
The first thing that we need is a playground or a blank project to work with. So, we are going to create a simple boilerplate with the Bootstrap 5 starter page.
Don’t try to implement this directly into your project. You will have to test this first outside more like a sandbox for errors and other stuff. So, on your desktop create a folder called Bootstrap 5 Content Slider or just a test folder. In my case, I will create a file called a slider_test
Step 1: Creating the base Document
Now, inside this folder create a file called index.html this will be our main file where we will write our HTML code. Okay, add the following code in your index.html file.
<!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>Hello, world!</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>
Step 2: Adding jQuery and Light Slider Plugin
Okay, for this to work we need jQuery and a simple and light weight plugin called light slider. You can get the jQuery CDN from here:
https://code.jquery.com/jquery-3.6.0.min.js
Now all you need to the light slider plugin CDN. Light slider comes with two main files. The CSS file, which has all the styles and the JS file which has the minified version of Light slider
// CDN for Lightslider JS <script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
// CDN for Lightslider CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
Okay, now you need to add this to our project file. Copy and paste the scripts as shown below:
<!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>Hello, world!</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>
Step 3: Setting up the slider code
Now its time for us to setup the slider code. By default light slider works really well with <ul> an <li> tags. So we are going to create a list of card items inside the unordered list. Copy and paste the code below. Or try to make something similar.
<!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>Hello, world!</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>
<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>
<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>
<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>
<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>
<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>
</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>
</body>
</html>
In the above example, you can see that I have 6 card items, but they are not wrapped in the col classes. That’s because light slider takes care of the Bootstrap classes automatically.
Step 4: Writing the custom script for Content slider
Okay, now its time for us to implement the script. Create a script tag below the light slider plugin and add the following inside that script tag.
$(document).ready(function(){
$('#card-slider').lightSlider();
});
That’s it. Our job here is done. Just to make sure let me share with you the complete HTML document now. Compare your code as below.
<!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>Hello, world!</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>
<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>
<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>
<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>
<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>
<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>
</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>
Now, if you run the file in the browser, you should see a simple and elegant content slider as below.
Step 5: Adding Custom Settings
There are a lot of other custom settings that you can add to this. For example. You can add the number of items to display, set speed, and also set up a responsive slider.
Here’s a link from where you can get much complete overview and setup guidance.
https://sachinchoolur.github.io/lightslider/examples.html
$(document).ready(function() {
$('#responsive').lightSlider({
item:4,
loop:false,
slideMove:2,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:800,
settings: {
item:3,
slideMove:1,
slideMargin:6,
}
},
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
});
});
Hope this article has helped you as it has helped me.
Master with Our Course!
Hrs of course contents, Modules, and lessons. Learn from industry experts. Perfect for .
Source link
