Bootstrap 3 Carousel with buttons
18,321
You can try something like this with Bootstrap..
It uses the data-target
and data-slide-to
navigate to specific slide.
Author by
user3301160
Updated on June 04, 2022Comments
-
user3301160 almost 2 years
I am new to bootstrap 3 and working on a Carousel for my website. I need to create a carousel with "fade" effect and 4 buttons below the carousel which when clicked trigger the transition between images. I don't want to use the default controls provided by the bootstrap API (left/right arrows and indicators).
I want to create something like this - https://moodle.org/
Here's my code so far -
<!DOCTYPE html> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Carousel Template for Bootstrap</title> <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"> <link href="carousel.css" rel="stylesheet"> </head> <body style="padding-left: 50px;padding-right: 50px;"> <div id="myCarousel" data-interval="false" class="carousel slide" data-ride="carousel" > <div class="carousel-inner"> <div class="item active"> <img alt="First slide" src="1.jpg"> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> </div> </div> </div> <div class="item"> <img alt="Second slide" src="1.jpg"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> </div> </div> </div> <div class="item"> <img alt="Third slide" src="1.jpg"> <div class="container"> <div class="carousel-caption"> <h1>One more for good measure.</h1> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.carousel --> <div align="center"> <p>Carousel with auto-slide disabled!</p> </div> <!-- FOOTER --> <footer> <p class="pull-right"><a href="http://getbootstrap.com/examples/carousel/#">Back to top</a></p> <p>© 2014 Company, Inc. · <a href="http://getbootstrap.com/examples/carousel/#">Privacy</a> · <a href="http://getbootstrap.com/examples/carousel/#">Terms</a></p> </footer> </div><!-- /.container --> <script src="./Carousel Template for Bootstrap_files/jquery.min.js"></script> <script src="./Carousel Template for Bootstrap_files/bootstrap.min.js"></script> <script src="./Carousel Template for Bootstrap_files/docs.min.js"></script> </body></html>
-
user3301160 about 10 yearsNice example .... but the buttons below do not scale properly when the screen size is adjusted.. What can be done to fix this ? So that the buttons appear right below the carousel no matter what the screen size.....