レスポンシブで使うカルーセルスライダーなら「slick」が便利

CDN版・・・単体で動きます

<!DOCTYPE html>
<html>
<head>
  <title>slick CDN版</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
  <style type="text/css">
      html, body {
      margin: 0;
      padding: 0;
    }
    .slider {
        width: 100%;
        margin: 0px auto;
    }
    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide img {
      width: 100%;
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }
	.slick-next {
    right: 35px;
    z-index: 99;
}
.slick-prev {
     left: 35px;
    z-index: 100;
}
  </style>
</head>
<body>

<section class="center slider">
    <div>
      <img src="https://placehold.it/468x100?text=1">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=2">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=3">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=4">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=5">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=6">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=7">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=8">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=9">
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".center").slick({
        autoplay:true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1
});
    });
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>slick CDN版</title>

html, body {

margin: 0;

padding: 0;

}

.slider {

width: 100%;

margin: 0px auto;

}

.slick-slide {

margin: 0px 20px;

}

.slick-slide img {

width: 100%;

}

.slick-prev:before,

.slick-next:before {

color: black;

}

.slick-next {

right: 35px;

z-index: 99;

}

.slick-prev {

left: 35px;

z-index: 100;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</section>

$(document).on('ready', function() {

$(".center").slick({

autoplay:true,

dots: true,

infinite: true,

centerMode: true,

slidesToShow: 2,

slidesToScroll: 1

});

</script>

</body>

</html>

Bootstrap4、CDN版・・・単体で動きます

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>slickブートストラップ版</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<style type="text/css">
    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide img {
      width: 100%;
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }
    .slick-next {
    right: 35px;
    z-index: 99;
}
    .slick-prev {
    left: 35px;
    z-index: 100;
}
</style>
</head>
<body>

<div class="container">
<section class="center">
    <div>
      <img src="https://placehold.it/468x100?text=1">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=2">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=3">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=4">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=5">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=6">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=7">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=8">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=9">
    </div>
  </section>
  
</div>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).on('ready', function() {
      $(".center").slick({
        autoplay:true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1
});
    });
</script>

</body>
</html>

<!doctype html>

<head>

<title>slickブートストラップ版</title>

.slick-slide {

margin: 0px 20px;

}

.slick-slide img {

width: 100%;

}

.slick-prev:before,

.slick-next:before {

color: black;

}

.slick-next {

right: 35px;

z-index: 99;

}

.slick-prev {

left: 35px;

z-index: 100;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</section>

</div>

$(document).on('ready', function() {

$(".center").slick({

autoplay:true,

dots: true,

infinite: true,

centerMode: true,

slidesToShow: 2,

slidesToScroll: 1

});

</script>

</body>

</html>

画面サイズによってスライダーの数を変える

オプション「responsive:～」を使用します。

<script type="text/javascript">
    $(document).on('ready', function() {
      $(".center").slick({
        autoplay:true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 4,
        slidesToScroll: 1,
		responsive: [{
			breakpoint: 1024,settings: { 
				slidesToShow: 3,
				slidesToScroll: 1,
			}
		},
		{
			breakpoint: 600,settings: { 
				slidesToShow: 2,
				slidesToScroll: 1
			}
		},
		{
			breakpoint: 480,settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}]
});
    });
</script>

$(document).on('ready', function() {

$(".center").slick({

autoplay:true,

dots: true,

infinite: true,

centerMode: true,

slidesToShow: 4,

slidesToScroll: 1,

responsive: [{

breakpoint: 1024,settings: {

slidesToShow: 3,

slidesToScroll: 1,

}

{

breakpoint: 600,settings: {

slidesToShow: 2,

slidesToScroll: 1

}

{

breakpoint: 480,settings: {

slidesToShow: 1,

slidesToScroll: 1

}

}]

});

</script>