x
<html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } </style></head><body><div class="container"> <h2>Left and Right Arrows</h2> <p>The icon-prev and icon-next classes creates arrows that points left and right. These are used to slide to the next item in the carousel. If you do not want to use them, you can use glyphicons instead.</p> <p>To do so, change .icon-prev with .glyphicon glyphicon-chevron-left and .icon-next with .glyphicon glyphicon-chevron-right.</p> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li>