overflow-carousel.css

/* colors */

:root {
  --text-color: #2a2a2a;
  --black0: #000000;
  --black1: #333333;
  --black2: #3b3b3b;
  --black3: #545454;
  --black4: #767676;
  --silver0: #9DABB7;
  --silver1: #B2C0CB;
  --silver2: #D5DDE4;
  --silver3: #E6EDF3;
  --silver4: #F0F5FA;
  --teal00: #00595a;
  --teal0: #007b7d;
  --teal1: #00999b;
  --teal2: #00dde0;
  --teal3: #6afdff;
  --violet0: #5a3fd6;
  --violet1: #6d4dfe;
  --violet2: #8569ff;
  --violet3: #a38eff;
  --violet4: #c7baff;
  --cyan0: #02628f;
  --cyan1: #0088c7;
  --cyan2: #00bceb;
  --cyan3: #00e4ff;
  --blue0: #001655;
  --blue1: #001c75;
  --blue2: #0e32a7;
  --blue3: #2f57d7;
  --green0: #2b8c34;
  --green1: #44ae4e;
  --green2: #58c463;
  --green3: #7ED386;
  --bluewhite: #dde4ef;
  --violetwhite: #d9d7ed;
  --gradient-white: linear-gradient(-45deg, var(--bluewhite), var(--violetwhite));
}
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  background: var(--gradient-white);
  background-size: cover;
}
div {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
@-ms-viewport {
  width: device-width;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  color: var(--text-color);
  line-height: 1;
}
h1 {
  font-size: 2.6rem;
}
h2 {
  font-size: 1.6rem;
  color: var(--violet0);
}
p {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.2rem;
  letter-spacing: 1px;
  margin: 0 auto;
  margin-bottom: 1rem;
  display: block;
}
/*** CAROUSEL ***/

.overflow-carousel {
  background: var(--silver3);
  position: relative;
  box-shadow: 0 0 150px rgba(55, 0, 155, .3);
  -webkit-box-shadow: 0 0 150px rgba(55, 0, 155, .3);
}
.overflow-carousel-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: no-wrap;
  overflow: auto;
  width: 100%;
}
.overflow-carousel-slide {
  padding: 0;
  position: relative;
  padding: 1rem;
}
.overflow-carousel-slide-thumbnail {
  background: var(--silver0);
  overflow: hidden;
}
.overflow-carousel-slide-thumbnail img {
  filter: blur(25px);
}
.overflow-carousel-slide .slide-caption {
  padding: 1rem;
}
.overflow-carousel-slide:nth-child(2n) .overflow-carousel-slide-thumbnail {
  background: var(--silver1);
}
.overflow-carousel-slide p {
  text-align: center;
  margin-bottom: .25rem;
}
.overflow-carousel-button {
  z-index: 999;
  outline: none;
  border: none;
  cursor: pointer;
  display: block;
  line-height: 0;
  padding: 0;
  position: absolute;
  top: 30%;
  width: 50px;
  height: 50px;
  margin: 0;
  left: -8px;
  font-size: 18px;
  border-radius: 0 50% 50% 0;
  transition: all .3s ease-in-out;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  background: var(--violet0);
  color: var(--silver4);
}
.overflow-carousel-button:hover, .overflow-carousel-button:focus {
  transform: scale(1.2);
  background: var(--violet1);
}
button, select, input {
  outline: none !important;
  border: none;
}
.overflow-carousel-button.next-button {
  right: -8px;
  left: auto;
  border-radius: 50% 0 0 50%;
}
/*** Scrollbar ***/

/* width */

.overflow-carousel ::-webkit-scrollbar {
  width: 10px;
}
/* Track */

.overflow-carousel ::-webkit-scrollbar-track {
  background: var(--silver4);
}
/* Handle */

.overflow-carousel ::-webkit-scrollbar-thumb {
  background: var(--violet0);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
/* Handle on hover */

.overflow-carousel ::-webkit-scrollbar-thumb:hover {
  background: var(--violet1);
}

overflow-carousel.html

<!-- requires Bootstrap 4: https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css -->
<!-- requires Jquery: https://code.jquery.com/jquery-3.6.0.min.js -->
<!-- requires FontAwesome https://use.fontawesome.com/releases/v5.13.0/css/all.css -->
<!-- requires FontAwesome https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css-->


<div class="container mt-5">
  <div class="row">
    <div class="col text-center">
      <h1>Responsive Overflow Carousel</h1>


      <h2>with Bootstrap 4 and Smooth Animation</h2>


      <p>Refresh page for responsive scroll behavior</p>


      <div class="test">
        <span>Slide Width:</span>
      </div>
    </div>
    <!--end col-->
  </div>
  <!--end row-->
</div>
<!--end container-->

<div class="container-fluid mt-4 overflow-carousel p-0">
  <div class="overflow-carousel-row">
    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->


    <div class="overflow-carousel-slide col-12 col-sm-12 col-md-6 col-lg-4">
      <div class="overflow-carousel-slide-thumbnail"><img alt="lorem picsum" src="https://picsum.photos/600/400">
      </div>


      <div class="slide-caption">
        <p>Xxxxxxxxx xxxx xx. Xxxx xxxxxxxx xxxxx xxxxxxxxx. Xxxxxxxx xxxxxx xxxxxxx. Xxxxxx xx. Xxxxx xxx xxxxxx xxxxxxx.</p>
      </div>
    </div>
    <!--end col-->
  </div>
  <!--end row--><button aria-disabled="false" aria-label="Previous" class="overflow-carousel-button previous-button" data-role="none" role="button" type="button"><i class="fas fa-chevron-left"></i></button> <button aria-disabled="false" aria-label="Next" class="overflow-carousel-button next-button" data-role="none" role="button" type="button"><i class="fas fa-chevron-right"></i></button>
</div>
<!--end container-fluid-->

overflow-carousel.js

$(document).ready(function() {
	// find width of the slide
	var slideWidth = $('.overflow-carousel-slide').css( "width" );
	
	$('.test span').append(slideWidth);
	
	// next moves forward by width of slide
	$(".next-button").click(function(){
	     $('.overflow-carousel-row').animate({ scrollLeft: '+='+slideWidth }, 400, "swing");  
	});
	
	//previous moves backward by width of slide
	$(".previous-button").click(function(){
	     $('.overflow-carousel-row').animate({ scrollLeft: '-='+slideWidth }, 400, "swing");  
	});
});

See a demo on Codepen: https://codepen.io/mfort/pen/QWKxyMO