3
Answers

how to put dot indicater outsid of carosoul

-------

-------

4y
444
1
I adding a carosoul in my page and carosoul working fine
 
but i want to add dot control means when click the dot then carousol image move
 
current output: 
 
I want to add this type of dots control outside of the carousel
 
 
Code:
  1. <style>    
  2.     .carousel {    
  3.         background: #2f4357;    
  4.         margin-top: 20px;    
  5.     }   
  6.     .carousel-item {    
  7.         text-align: center;    
  8.         min-height: 280px;    
  9.     }    
  10.     .gallaryparegraph{    
  11.         padding-top:45px;    
  12.         line-height:25px;    
  13.         text-align:center;    
  14.         font-size:16px;    
  15.     }    
  16. </style>    
  17.     
  18. <div class="container">    
  19.     <div class="row">    
  20.         <div class="col-md-6">    
  21.             <div class="container-lg my-3">    
  22.                 <div id="myCarousel" class="carousel slide" data-ride="carousel">    
  23.                      Carousel indicators     
  24.                     <ol class="carousel-indicators">    
  25.                         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    
  26.                         <li data-target="#myCarousel" data-slide-to="1"></li>    
  27.                         <li data-target="#myCarousel" data-slide-to="2"></li>    
  28.                     </ol>    
  29.                      Wrapper for carousel items     
  30.                     <div class="carousel-inner">    
  31.                         <div class="carousel-item active">    
  32.                             <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2592&q=60%202592w" style="width:300px;height:300px;" alt="First Slide">    
  33.                         </div>    
  34.                         <div class="carousel-item">    
  35.                             <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2592&q=60%202592w" style="width:300px;height:300px;"   alt="Second Slide">    
  36.                         </div>    
  37.                         <div class="carousel-item">    
  38.                             <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2592&q=60%202592w" style="width:300px;height:300px;"  alt="Third Slide">    
  39.                         </div>    
  40.                     </div>    
  41.                      Carousel controls     
  42.                     <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">    
  43.                         <span class="carousel-control-prev-icon accordion"></span>    
  44.                     </a>    
  45.                     <a class="carousel-control-next" href="#myCarousel" data-slide="next">    
  46.                         <span class="carousel-control-next-icon"></span>    
  47.                     </a>    
  48.                 </div>    
  49.             </div>    
  50.         </div>    
  51.         <div class="col-md-6">  
  52.             content    
  53.         </div>    
  54.     </div>    
  55. </div>  
Answers (3)
Next Recommended Forum