Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example of Setting Bootstrap 3 Carousel's keyboard Option via Data Attribute</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .carousel{ background: #2f4357; margin-top: 20px; } .carousel .item{ min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */ } .carousel .item img{ margin: 0 auto; /* Align slide image horizontally center */ } </style> </head> <body> <div class="container-lg my-3"> <p><strong>Note:</strong> The following carousel will not show previous or next slide if you press left or right arrow keys on the keyboard when carousel has focus (press tab key on the keyboard to set focus on the carousel), since the <code>keyboard</code> option is set to <code>null</code> i.e. the attribute <code>data-keyboard="null"</code> is applied on the <code>.carousel</code> element.</p> <div id="myCarousel" class="carousel slide" data-keyboard="null" data-ride="carousel"> <!-- 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> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="/examples/images/slide1.png" alt="First Slide"> <div class="carousel-caption"> <h3>First slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <img src="/examples/images/slide2.png" alt="Second Slide"> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <img src="/examples/images/slide3.png" alt="Third Slide"> <div class="carousel-caption"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Carousel controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </body> </html>