Adding slider in CSS bootstrap?

Question

Help me in adding slider in CSS bootstrap

Mohamed Azarudeen Z · Answer

Slide 1 Some description for slide 1 goes here Slide 2 Some description for slide 2 goes here Slide 3 Some description for slide 3 goes here Previous Next

Tuhin Paul · Answer

See the code to add a slider to a webpage using CSS and Bootstrap: Slide 1 Some description for slide 1 goes here Slide 2 Some description for slide 2 goes here Slide 3 Some description for slide 3 goes here Previous Next .carousel-inner img { width: 100%; height: auto; } .carousel-caption { background-color: rgba(0,0,0,0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; padding: 20px; } .carousel-caption h3 { color: #fff; } .carousel-caption p { color: #fff; } .carousel-control.left, .carousel-control.right { background-image: none; } .carousel-control { top: 50%; transform: translateY(-50%); height: 40px; width: 40px; background-color: rgba(0,0,0,0.5); opacity: 0.5; } .carousel-control:hover { background-color: rgba(0,0,0,0.7); opacity: 1; } .carousel-control i { font-size: 25px; color: #fff; } .carousel-indicators { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 10px; } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255,255,255,0.5); margin-right: 5px; cursor: pointer; } .carousel-indicators li.active { background-color: #fff

Deepak Rawat · Answer

This is you can add a slider/carousel using CSS and Bootstrap Previous Next Replace "image1.jpg" , "image2.jpg" , and "image3.jpg" with the URLs or paths to your own images also, you can customize css according to your need.

Rajkiran Swain · Answer

Image 1 Caption Image 2 Caption Image 3 Caption Previous Next

Adding slider in CSS bootstrap?

Answers (4)