<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 id="carousel-dijitalders" class="carousel slide carousel-fade" data-ride="carousel"> <div class="row"> <div class="col-sm-1 d-none d-sm-block"> <ol class="carousel-indicators list-group"> <li data-target="#carousel-dijitalders" data-slide-to='0' class="active list-group-item p-0 mb-1"><img src='https://via.placeholder.com/550' alt="" class="img-fluid" /></li> <li data-target="#carousel-dijitalders" data-slide-to='1' class="list-group-item p-0 mb-1"><img src="https://via.placeholder.com/650/0000FF" alt="" class="img-fluid" /></li> <li data-target="#carousel-dijitalders" data-slide-to='2' class="list-group-item p-0 mb-1"><img src="https://via.placeholder.com/750/00FF00" alt="" class="img-fluid" /></li> <li data-target="#carousel-dijitalders" data-slide-to='3' class="list-group-item p-0 mb-1"><img src="https://via.placeholder.com/850/FF0000" alt="" class="img-fluid" /></li> <li data-target="#carousel-dijitalders" data-slide-to='4' class="list-group-item p-0 mb-1"><img src="https://via.placeholder.com/950/0F0F0F" alt="" class="img-fluid" /></li> <li data-target="#carousel-dijitalders" data-slide-to='5' class="list-group-item p-0 mb-1"><img src="https://via.placeholder.com/1000/000000" alt="" class="img-fluid" /></li> </ol> </div> <div class="col-sm-6"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/550" alt="" class="img-fluid" /> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/650/0000FF" alt="" class="img-fluid" /> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/750/00FF00" alt="" class="img-fluid" /> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/850/FF0000" alt="" class="img-fluid" /> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/950/0F0F0F" alt="" class="img-fluid" /> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/1000/000000" alt="" class="img-fluid" /> </div> </div> <a class="carousel-control-prev" href="#carousel-dijitalders" 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-dijitalders" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="col-sm-4"> <h4>Product Info</h4> <p>Bişeyler, bişeyler, bişeyler..</p> <p>Herkese selamlar...</p> </div> </div> </div> <br><br> </div>

.carousel-indicators { position: initial; right: initial; bottom: initial; left: initial; z-index: initial; display: initial; -ms-flex-pack: initial; justify-content: initial; padding-left: initial; margin-right: initial; margin-left: initial; list-style: initial; } .carousel-indicators li { width: auto; height: auto; text-indent: 0; border: none; } .carousel-indicators li.active { border: 1px solid #aaaaaa; }