How to make thumbnails scrollable under a bootstrap carousel?

Question

I am trying to change the indicators in a Bootstrap 4.4 carousel from dashes to thumbnails under the slides. I also want to be able to scroll/swipe the thumbnails separately to enable the user to browse all the thumbnails.

I was able to change the indicators from dashes to thumbnails. However, am running into the following challenges

Problem 1: The left arrow (in red) and the right arrow (in green) overlap my thumbnails container which makes the arrows not vertically-centered in the slider rather in vertically-centered in the entire carousel.
Problem 2: I need to change the Previous and Next links at the very bottom to an arrow shape on the left and another arrow on the right to scroll the thumbnails because of Problem 1 above.

How can I fix the above 2 problems?

Here is my code and also can be found on the following fiddle

        window.addEventListener('load', function () {
            var button = document.getElementById('slideBack1');
            var container = document.getElementById('carousel_indicators');

            button.addEventListener("click", function (event) {
                event.preventDefault();
                sideScroll(container, 'right', 25, 100, 10);
            });

            var back = document.getElementById('slideNext1');
            back.addEventListener("click", function (event) {
                event.preventDefault();
                sideScroll(container, 'left', 25, 100, 10);
            });

            function sideScroll(element, direction, speed, distance, step) {
                scrollAmount = 0;
                var slideTimer = setInterval(function () {
                    if (direction == 'left') {
                        element.scrollLeft -= step;
                    } else {
                        element.scrollLeft += step;
                    }
                    scrollAmount += step;
                    if (scrollAmount >= distance) {
                        window.clearInterval(slideTimer);
                    }
                }, speed);
            }
        });

       body {
            background-color: #ccc;
        }

        .carousel-control-prev {
           background-color: red;
        }
        
        .carousel-control-next {
           background-color: green;
        }
        .carousel-indicators {
            overflow: auto;
            overflow-y: hidden;
            -ms-overflow-style: scroll;
            scrollbar-width: none;
            position: relative !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

            .carousel-indicators::-webkit-scrollbar {
                display: none;
            }


            .carousel-indicators li {
                height: 3.75rem !important;
                width: 5rem !important;
            }

        ol li img.img-tn {
            height: 100%;
            display: block;
            object-fit: cover;
            padding: 0.10rem;
        }

        .carousel-control-prev-icon-thumbs {
        }

        .carousel-control-next-icon-thumbs {
        }

        .carousel-inner {
            width: 100%;
            height: 75%;
        }

        figure picture img.image-cover {
            width: 100%;
            height: 25rem;
            object-fit: cover;
        }









    

        

            
            

                
                
                    
                    
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                        
                        
                            
                                
                            
                            I am an image caption
                        
                        
                    
                    
                    
                    
                        
                            
                            Previous
                        
                        
                            
                            Next
                        
                    
                    
                
                
                
                
                    
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        
                        
                        
                            
                                
                            
                        
                        

                    

                    
                    
                        
                            
                            Previous
                        
                        
                            
                            Next

https://jsfiddle.net/h02pvquk/

user_13018761 · Answer

Inserting Controls into .carousel-inner solves the problem 1.

Looking at the code excerpted from the question below, problem 2 can use .carousel-control-prev-icon, .carousel-control-next-icon class instead of .carousel-control-prev-icon-thumbs, carousel-control-next-icon-thumbs.



  
    
    Previous
  
  
    
    Next

The final code looks like this:

window.addEventListener('load', function() {
  var button = document.getElementById('slideBack1');
  var container = document.getElementById('carousel_indicators');

  button.addEventListener("click", function(event) {
    event.preventDefault();
    sideScroll(container, 'left', 25, 100, 10); //right->left
  });

  var back = document.getElementById('slideNext1');
  back.addEventListener("click", function(event) {
    event.preventDefault();
    sideScroll(container, 'right', 25, 100, 10);//left->right
  });

  function sideScroll(element, direction, speed, distance, step) {
    scrollAmount = 0;
    var slideTimer = setInterval(function() {
      if (direction == 'left') {
        element.scrollLeft -= step;
      } else {
        element.scrollLeft += step;
      }
      scrollAmount += step;
      if (scrollAmount >= distance) {
        window.clearInterval(slideTimer);
      }
    }, speed);
  }
});

body {
  background-color: #ccc;
}

#slideBack1>.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

#slideNext1>.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

#scoll_pane {
position: relative;
}
#slideBack1, #slideNext1 {
z-index: 16;
background: yellow;
}

.carousel-control-prev {
  background-color: red;
}

.carousel-control-next {
  background-color: green;
}

.carousel-indicators {
  overflow: auto;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.carousel-indicators::-webkit-scrollbar {
  display: none;
}

.carousel-indicators li {
  height: 3.75rem !important;
  width: 5rem !important;
}

ol li img.img-tn {
  height: 100%;
  display: block;
  object-fit: cover;
  padding: 0.10rem;
}

.carousel-control-prev-icon-thumbs {}

.carousel-control-next-icon-thumbs {}

.carousel-inner {
  width: 100%;
  height: 75%;
}

figure picture img.image-cover {
  width: 100%;
  height: 25rem;
  object-fit: cover;
}









  

    

      
      

        
        
          
          
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            
            
            
              
                
              
              I am an image caption
            
            

            
            
              
                
                Previous
              
              
                
                Next
              
            
            
          
          

        
        
        
        
          
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
            
              
                
              
            
            
         
          

 
          
            
              
              Previous
            
            
              Next

jsfiddle

How to make thumbnails scrollable under a bootstrap carousel?

1 Answers