Re-title: Vertical Product Display

Question

On my web page, currently, project products are listed vertically, row by row.

I want to display them vertically in a scrollable way.

How to change it to horizontal?

div class="row">
   <div class="col-12">
     <div class="tab-content tab-animate-zoom">
       <!-- Start Single Tab Item -->
       <div class="tab-pane show active" id="fruits">
         <div class="default-slider default-slider--hover-bg-red product-default-slider">
           <div class="product-default-slider-4grid-2rows gap__col--30 gap__row--40"> @foreach (var item in Model.CakesVM) {
             <!-- Start Single Default Product -->
             <div class="product__box product__default--single text-center">
               <!-- Start Product Image -->
               <div class="product__img-box  pos-relative">
                 <a href="#" class="product__img--link">
                   <img class="product__img img-fluid" src="~/@Html.DisplayFor(modelItem => item.ProductPicture)" alt="">
                 </a>
                 <!-- Start Product Action Link-->
                 <ul class="product__action--link pos-absolute">
                   <li>
                     <a href="@Url.Action(" addToCart", new { id=item.ID })" data-toggle="modal">
                       <i class="icon-shopping-cart"></i>
                     </a>
                   </li>
                   <li>
                     <a href="#">
                       <i class="icon-heart"></i>
                     </a>
                   </li>
                 </ul>
                 <!-- End Product Action Link -->
               </div>
               <!-- End Product Image -->
               <!-- Start Product Content -->
               <div class="product__content m-t-20">
                 <a href="product-single-default.html" class="product__link">@Html.DisplayFor(modelItem => item.ProductName)</a>
                 <div class="product__price m-t-5">
                   <span class="product__price">$@Html.DisplayFor(modelItem => item.ProductPrice)</span>
                 </div>
               </div>
               <!-- End Product Content -->
             </div>
             <!-- End Single Default Product --> }
           </div>
         </div>
       </div>
       <!-- End Single Tab Item -->
     </div>
   </div>
 </div>

This is the current example view, with items loading vertically.

Answer 1

I've added a still image for your reference.

.product-default-slider {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: gray lightgray;
}

.product-default-slider::-webkit-scrollbar {
  height: 8px;
}

.product-default-slider::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 4px;
}

.product-horizontal-slider {
  display: flex;
  flex-wrap: nowrap;
}

.product__box {
  flex: 0 0 auto;
  margin-right: 10px;
}

  

    

      
      

        

          


            
            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 1
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 2
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 3
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 4
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 5
                

                  .99