Swiperで画像のようなドットを設定したときのメモ。 SlickとSwiperどちらも試して、結果Swiperで実装しました。
スライダーのドット設定はデザインによっては実装がかなり面倒だったりしますが、とりあえず意図した通り動いているので良しとします。

各種コード

HTML

スライダーの外側にドットと矢印を表示する（slide-pagination-wrapperの個所）。

<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="inner">コンテンツ</div>
</div><!--/.swiper-slide-->
<div class="swiper-slide">
<div class="inner">コンテンツ</div>
</div><!--/.swiper-slide-->
<div class="swiper-slide">
<div class="inner">コンテンツ</div>
</div><!--/.swiper-slide-->
</div><!--.swiper-wrapper-->
<div class="slide-pagination-wrapper">
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
</div>
</div><!--/.swiper-->

JavaScript

画面サイズで一度に表示するスライド数を変える必要がありました。画面サイズが600px以上の場合は3枚表示（両サイドが切れて表示）、600px以下の場合は1枚表示（両サイドが切れて表示）に設定しています。

<script>
const mediaQueryList = window.matchMedia('(min-width: 600px)');
/**
* イベントリスナー
*/
const listener = (event) => {
// リサイズ時に行う処理
if (event.matches) {
// 600px以上
const mySwiper = new Swiper(".swiper", {
// Optional parameters
loop: true,
slidesPerView: 3.5,
centeredSlides: true,
spaceBetween: 30,
autoplay: { // 自動再生
delay: 5000, // 1秒後に次のスライド
disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
//console.log('PC用ブレークポイント用処理');
} else {
// 600px未満
const mySwiper = new Swiper(".swiper", {
// Optional parameters
loop: true,
slidesPerView: 1.5,
spaceBetween: 20,
centeredSlides: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
//console.log('SP用ブレークポイント用処理');
}
};
// リスナー登録
mediaQueryList.addEventListener("change", listener);
// 初期化処理
listener(mediaQueryList);
</script>

CSS

メディアクエリで画面サイズで表示を変えています。

<style>
.swiper {
margin-top: 80px;  
}
.swiper-wrapper {
margin-bottom: 80px;
}
.swiper-slide {
background-color: #fff;
opacity: 0.5;
transform: scale(.90); 
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
height: auto !important;
width: 100%;
}
.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-next {
background-color: #fff;
height: auto !important;
width: 100%;
opacity: initial;
transform:none;
transition: none;
}
.slider .slick-slide.slick-active {
opacity: 1;
transform: scale(1); 
}
/*dots and arrow custom*/
.slide-pagination-wrapper {
display: flex;
justify-content: center;
position: relative;
margin: 0 auto;
height: 36px;
max-width: 450px;
}
.swiper-pagination {
position: static!important;
z-index: initial!important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
width: auto;
}
.swiper-pagination-bullets {
display: flex;
align-items: center;
}
.swiper-button-prev,
.swiper-button-next {
position: static;
margin-top: initial;
}
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}
.swiper-button-next, .swiper-button-prev {
font-size: 12px;
line-height: 36px;
text-align: center;
font-size: 12px;
line-height: 0;
width: 36px!important;
height: 36px!important;
padding: 0;
cursor: pointer;
display: block;
background: #fff;
border-radius: 50%;
color: #A82B43!important;
position: relative;
z-index: 11;
}
.swiper-button-prev:before {
content: '<';
display: block;
}
.swiper-button-next:before {
content: '>';
display: block;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
justify-content: center;
}
.swiper-pagination-bullet {
border-radius: 50%;
border: solid 1px #fff;
background-color: initial!important;
cursor: pointer;
color: transparent;
font-size: 0;
line-height: 10px;
opacity: initial !important;
width: 10px!important;
height: 10px!important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #fff!important;
border: solid 1px #fff;
border-radius: 50%;
line-height: 10px;
width: 10px!important;
height: 10px!important;
}
@media screen and (max-width:600px) {
.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-next {
background-color: #fff;
opacity: 0.5;
transform: scale(.90)!important; 
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
height: auto !important;
width: 100%;
}
.slide-pagination-wrapper {
max-width: 400px;
}
}/*-600px*/
</style>