Carousel Padding

You can create padding around the columns by changing the values of data-padding="" attribute. That we are using in ( .bs4-carousel ) div. This will help you to set the navigation buttons and indicators positions.

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-carousel-move-all" data-padding="5px 5px 5px 5px">
	1st value means : Top Padding
	2nd value means : Right Padding
	3rd value means : Bottom Padding
	4th value means : Left Padding

	Tip : when your indicators or navigation buttons are overlapping on your images then you can
	solve this issue by increasing this attribute values.

Gap Between Columns

You can create gap in-between the columns by changing the values of data-padding="" attribute. That we are using in ( .carousel-inner ) div.

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-carousel-move-all" data-padding="5px 5px 5px 5px">

    <!-- Carousel Inner -->
    <div class="carousel-inner" data-role="listbox" data-padding="5px 5px 5px 5px">
	1st value means : Top Padding
	2nd value means : Right Padding
	3rd value means : Bottom Padding
	4th value means : Left Padding

Images Border

You can create or change border of images by changing the values of data-border="" attribute. That we are using in ( .carousel-inner ) div.

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-carousel-move-all" data-padding="5px 5px 5px 5px">

    <!-- Carousel Inner -->
    <div class="carousel-inner" data-role="listbox" data-padding="5px 5px 5px 5px" data-border="1px solid #000000">

  1st value means : Width Of The Border
  ( medium|thin|thick|length|initial|inherit )

  2nd value means : Style Of The Border 
  ( none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit )

  3rd value means : Color Of The Border
  ( Hexadecimal|RGB|RGBA|HSL|HSLA|Predefined/Cross-browser color names )

Images Border Radius

You can create or change border-radius of images by changing the values of data-radius="" attribute. That we are using in ( .carousel-inner ) div.

  <!-- Carousel -->
  <div class="carousel slide bs4-carousel bs4-carousel-move-all" data-padding="5px 5px 5px 5px">

    <!-- Carousel Inner -->
    <div class="carousel-inner" data-role="listbox" data-radius="4px" data-padding="5px 5px 5px 5px" data-border="1px solid #000000">

This Grid System Only Works With ( Move One By One Layouts )

@media (min-width: 1201px)	@media (min-width: 993px) and (max-width: 1200px)	@media (min-width: 769px) and (max-width: 992px)	@media (min-width: 577px) and (max-width: 768px)	@media only screen and (max-width: 576px)
data-column=""	data-m1200=""	data-m992=""	data-m768=""	data-m576=""


<body>

  <!-- Start Carousel -->
  <div id="myCarousel" class="carousel slide" data-interval="4000" data-pause="hover"
   data-column="6" data-m1200="4" data-m992="3" data-m768="2" data-m576="1">

    <!-- Wrapper for Slides -->
    <div class="carousel-inner" role="listbox">

      <!-- Column # 1 -->
      <div class="carousel-item active">
        <div class="row">
          <div class="col">
           
            <!-- All Data Related To Column # 1 Will Come Here (Images,paragraph,heading etc) -->
		
          </div> <!-- End Of /.col -->
        </div> <!-- End Of /.row -->
      </div>
      <!-- End Of Column # 1 -->
	  
      <!-- Column # 2 -->
      <div class="carousel-item">
        <div class="row">
          <div class="col">
           
            <!-- All Data Related To Column # 2 Will Come Here (Images,paragraph,heading etc) -->
		
          </div> <!-- End Of /.col -->
        </div> <!-- End Of /.row -->
      </div>
      <!-- End Of Column # 2 -->
	  
      <!-- Column # 3 -->
      <div class="carousel-item">
        <div class="row">
          <div class="col">
           
            <!-- All Data Related To Column # 3 Will Come Here (Images,paragraph,heading etc) -->
		
          </div> <!-- End Of /.col -->
        </div> <!-- End Of /.row -->
      </div>
      <!-- End Of Column # 3 -->
	  
      <!-- Column # 4 -->
      <div class="carousel-item">
        <div class="row">
          <div class="col">
           
            <!-- All Data Related To Column # 4 Will Come Here (Images,paragraph,heading etc) -->
		
          </div> <!-- End Of /.col -->
        </div> <!-- End Of /.row -->
      </div>
      <!-- End Of Column # 4 -->

      <!-- Column # 5 -->
      <div class="carousel-item">
        <div class="row">
          <div class="col">
           
            <!-- All Data Related To Column # 5 Will Come Here (Images,paragraph,heading etc) -->
		
          </div> <!-- End Of /.col -->
        </div> <!-- End Of /.row -->
      </div>
      <!-- End Of Column # 5 -->
	  
      <!-- Column # 6 -->
      <div class="carousel-item">
        <div class="row">
          <div class="col">
           
            <!-- All Data Related To Column # 6 Will Come Here (Images,paragraph,heading etc) -->
		
          </div> <!-- End Of /.col -->
        </div> <!-- End Of /.row -->
      </div>
      <!-- End Of Column # 6 -->

    </div<!-- End of Wrapper For Slides -->

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
      <i class="fas fa-angle-left"></i>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
      <i class="fas fa-angle-right"></i>
    </a>
  </div><!--End Carousel-->

</body>

Explanation

In above code we are creating 6 columns carousel. These columns behave differently on different resolutions or screens size:

If the screen size is >= 1201px then it shows 6 columns
If the screen size is >= 993px + screen size <= 1200px then it shows 4 columns
If the screen size is >= 769px + screen size <= 992px then it shows 3 columns
If the screen size is >= 577px + screen size <= 768px then it shows 2 columns
If the screen size is <= 576px then it shows 1 column

Remember that values of all attributes are not greater than number of ( .carousel-item ) block. As you can see in above example that each attribute value is not greater than 6. Because we are only create 6 number of ( .carousel-item ) blocks. But you can create 5 column layout just by decreasing the value from 6 to 5 without making any change in number of ( .carousel-item ) blocks.

Also remember you can't use thumbnails or indicators in these types of layouts

Support

Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes53@gmail.com