<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
    </div>
  </div>
</div>
<!-- must close bootstrap container -->

<div class="designs">
  <div class="boxes">
    <div class="slider">
      <div class="slick-slideshow__slide">
        <h3>1</h3>
      </div>
      <div class="slick-slideshow__slide">
        <h3>2</h3>
      </div>
      <div class="slick-slideshow__slide">
        <h3>3</h3>
      </div>
      <div class="slick-slideshow__slide">
        <h3>4</h3>
      </div>
      <div class="slick-slideshow__slide">
        <h3>5</h3>
      </div>
      <div class="slick-slideshow__slide">
        <h3>6</h3>
      </div>
    </div>

  </div>
</div>

<!-- must start bootstrap container -->
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
    </div>
  </div>
</div>
/* custom css */

.designs {
	overflow:hidden;
	margin:20px 0 20px 15px;
}
.boxes {
	margin-left:calc((100% - 1140px) / 2);
	display:flex;
	flex-wrap:wrap;
}
p.find-out{
	margin:2rem 0 0;
}
.find-out a{
	color:#fff;
	text-decoration:none;
	font-weight:bold;
}
@media screen and (max-width:1200px){
	.designs {
	overflow:hidden;
	margin:20px 0 20px;
	}
	.boxes {
	margin-left:0;
	}
}
@media screen and (max-width:992px){
	.box{flex:1 0 50%;}
}
@media screen and (max-width:767px){
	.box{flex:1 0 100%;}
}

.slider {
  width:100%;
  margin: 0 auto;
  background: red;
}
.slider h3 {
  background: #fff;
  color: black;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}
.slick-list {
    padding-left: 0px!important;
}
var $carousel = $('.slider');

var settings = {
  dots: false,
  arrows: false,
  slide: '.slick-slideshow__slide',
  slidesToShow: 3,
  centerMode: true,
  centerPadding: '60px',
};

function setSlideVisibility() {
  //Find the visible slides i.e. where aria-hidden="false"
  var visibleSlides = $carousel.find('.slick-slideshow__slide[aria-hidden="false"]');
  //Make sure all of the visible slides have an opacity of 1
  $(visibleSlides).each(function() {
    $(this).css('opacity', 1);
  });

  //Set the opacity of the first and last partial slides.
  $(visibleSlides).first().prev().css('opacity', 0);
}

$carousel.slick(settings);
$carousel.slick('slickGoTo', 1);
setSlideVisibility();

$carousel.on('afterChange', function() {
  setSlideVisibility();
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css
  3. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js