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://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } </style></head><body><div class="container mt-3"> <h2>Carousel Options</h2> <p>The <strong>data-keyboard</strong> attribute specifies whether the carousel should react to keyboard events</p> <p>To go to the previous or the next item with the keyboards "left" or "right" arrows, you need to press the tab key on the keyboard to first enter the modal window, and then press the left or right arrow keyboard buttons.</p> <p>To remove the ability to use the keyboard, set the value to "false".</p> <!-- The carousel --> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500" data-pause="hover" data-keyboard="true"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ul> <!-- The slideshow -->