Home Web Design Bootstrap Bootstrap Carousel Slider Full Page With CSS | Responsive Image Slider

Bootstrap Carousel Slider Full Page With CSS | Responsive Image Slider

November 1, 2019

11907

How we can create a responsive carousel or slider using bootstrap? Solution: See this Bootstrap Carousel Slider With CSS, Responsive Image Slider.

Previously I have shared some image sliders, but this is completely based on bootstrap there is no additional JS. Basically, the image carousel or slider is a presentation of images in a cool way. This is a kind of slideshow of images, also you have controls for next and previous. Mostly all types of websites use image or content sliders on their home page.

Today you will learn to create a Responsive Image Slider with bootstrap. Basically, there is a full width or full page slider with 3 images, you can add more images as your requirement. The image slides automatically, also there are two buttons for next and previous using them you can change images manually. In the bottom side of the slider, you can see the number of dots according to how many images present in the slider. And using them you can directly jump by clicking any dot.

So, Today I am sharing Bootstrap Carousel Slider Full Page With CSS. There I have used bootstrap and CSS, mainly the whole program is based on bootstrap. There is only a line of JS for running the slide, which I have placed in the HTML file. As we know bootstrap is a library of HTML CSS JS, and we have put just class names for creating programs.

If you are thinking now how this responsive image slider actually is, then see the preview given below.

Preview Of Responsive Image Slider

See this video preview to getting an idea of how this slider looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

Bootstrap Carousel Slider Full Page With CSS Source Code

Before sharing source code, let’s talk about it. First, I have created the main div with class names that are provided by bootstrap in the HTML file. Then I have created a list with 3 list items for the carousel indicator which is placed in the bottom side. Now I have created a div and placed bootstrap’s default id and class names.

After that, I have created 2 hyperlinks for creating the next and previous buttons. Inside that, I have created a span for text and icon also with placing id and class names. In the HTML file, I have linked Bootstrap CSS, jQuery, and Bootstrap JS file. And there is a single line of JS codes, which I have placed in the HTML file using <script> </script> method (info).

Now using CSS I have placed the images using background-image: command. In the HTML file, I have placed a class name for slider now using CSS I have selected their child using :nth-of-type command. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create only 2 files. One for the HTML, and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Carousel Slider | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="imageCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#imageCarousel" data-slide-to="1"></li>
        <li data-target="#imageCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active"></div>
        <div id="target" class="carousel-item"></div>
        <div class="carousel-item"></div>
    </div>
    <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div> 
<script>$('.carousel').carousel();</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Carousel Slider | Webdevtrick.com</title>

</head>

<body>

</ol>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
.carousel .carousel-item {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.carousel .carousel-item:first-of-type {
    background-image: url("https://webdevtrick.com/wp-content/uploads/gadget.jpg");
}

.carousel .carousel-item:nth-of-type(2) {
    background-image: url("https://webdevtrick.com/wp-content/uploads/auto.jpg");
}

.carousel .carousel-item:last-of-type {
    background-image: url("https://webdevtrick.com/wp-content/uploads/design.jpg");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

.carousel .carousel-item {

width: 100%;

height: 100vh;

background-size: cover;

background-position: center;

}

.carousel .carousel-item:first-of-type {

}

.carousel .carousel-item:nth-of-type(2) {

}

.carousel .carousel-item:last-of-type {

}

.carousel-control-prev-icon, .carousel-control-next-icon {

width: 50px;

height: 50px;

}

That’s It. Now you have successfully created Bootstrap Carousel Slider Full Page With CSS, Responsive Image Slider. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.

12 COMMENTS

Sam Benjamin November 3, 2019 At 1:59 pm

Bootstrap is older only few use it now but corousel is still good slider……………… 🙃

Reply
Raj May 20, 2020 At 10:03 am

$(‘.carousel’).carousel(); : Uncaught TypeError: $(…).carousel is not a function

Reply
Matthias August 26, 2020 At 1:21 pm

Hello,
Very interesting article!
Is it possible to use the carousel with more than three images?
If so, what should be changed in the CSS file?

Reply
Matthias August 26, 2020 At 3:13 pm

Hello

Is it possible to use the carousel with more than three images?
If so, how to modify the CSS file?

Reply
Matthias August 26, 2020 At 7:59 pm

Hello

Can I use the carousel with more than three images?
If so, what modification should be made in the CSS file?

Reply
Saurabh October 12, 2020 At 10:30 am

How to use this slider on blogger.plz guide me.

Reply
ladipage October 23, 2020 At 8:37 am

Excellent post! We will be linking to this great article on our site.

Keep up the great writing.

Reply
Taif airport October 29, 2020 At 4:32 am

I have been browsing oline more than 2 hours today, yet I never found any interesting article like
yours. It is pretty worth enough foor me. In my
view, if alll web ownjers and bloggers made good content as yoou did,
the internet will be a lot more useful than ever before.

Reply
president of the usa November 15, 2020 At 7:02 am

I’m extremely pleased to find this page. I wanted to thank you for your time due to this wonderful
read!! I definitely loved every bit of it and i also have you book marked to see
new things on your site.

Reply
off campus apartments, November 28, 2020 At 3:31 am

I got what you mean, thank you for posting. Woh I am thankful to find this website through
google.

Reply
antique furniture December 1, 2020 At 12:23 am

Hello.This post was extremely fascinating, especially because I was browsing
for thoughts on this subject last week.

Reply
design December 13, 2020 At 10:33 pm

WOW just what I was searching for. Came
here by searching for ladipage

Reply