<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="carousel-1" class="carousel slide" data-ride="carousel"> <!-- slides bulletes --> <ol class="carousel-indicators"> <li data-target="#carousel-1" data-slide-to="0" class="active"></li> <li data-target="#carousel-1" data-slide-to="1"></li> <li data-target="#carousel-1" data-slide-to="2"></li> </ol> <!-- wrapper for slides --> <div class="carousel-inner" role="listbox"> <!-- slides 1 --> <div class="carousel-item active"> <img src="https://source.unsplash.com/LAaSoL0LrYs/1920x1080" alt="Chania"> </div> <!-- slides 2 --> <div class="carousel-item"> <img src="https://source.unsplash.com/bF2vsubyHcQ/1920x1080" alt="Chania"> </div> <!-- slides 3 --> <div class="carousel-item"> <img src="https://source.unsplash.com/szFUQoyvrxM/1920x1080" alt="Flower"> </div> </div> <!-- left and right slides control arrrows --> <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div>

.carousel-item { height: 50vh; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .carousel-control-prev span, .carousel-control-next span { color:#fff; } .carousel-control-prev span:hover, .carousel-control-next span:hover { opacity: .7; filter: alpha(opacity=70); }

/* first carousel slidesshow */ $('#carousel-1').carousel({ // The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. interval: 500, // Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. pause: "hover", // Whether the carousel should cycle continuously or have hard stops. wrap: true, // Whether the carousel should react to keyboard events. keyboard: true });