画像スライダーのライブラリはslickよりSwiperの方がおすすめなたった１つの理由

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- 以下のCSSは矢印やページャーでslickで用意されているレイアウトを使用するなら必要。自分でレイアウトを作るなら不要。 -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<!-- 以下の前に別途jQueryを読み込む必要あり -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slick">
    <div class="slick-slide slide1">スライド1</div>
    <div class="slick-slide slide2">スライド2</div>
    <div class="slick-slide slide3">スライド3</div>
</div>

/* スライドの幅と高さ */
.slick {
    width: 350px;
    height: 200px;
    margin: 0 auto;
    /* 矢印をabsoluteにするので */
    position: relative;
}
/* サンプルの文字の色などの調整 */
.slick-slide {
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
/* 矢印の大きさなどを指定 */
.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: white;
    font-size: 80px;
    cursor: pointer;
    padding: 0 7.5px;
}
/* 矢印の位置をそれぞれ指定 */
.slick-prev {
    left: 0;
}
.slick-next {
    right: 0;
}
.slide1 {
    background: red;
}
.slide2 {
    background: green;
}
.slide3 {
    background: blue;
}

$('.slick').slick({
    autoplay: true, // 自動再生するか
    autoplaySpeed: 3000, // 自動再生で切り替えをする時間
    speed: 500, // 自動再生や左右の矢印でスライドするスピード
    arrows: true, // 前後の矢印を指定するか
    // 矢印のHTMLを指定、今回はfont-awesomeを使った
    prevArrow: '<i class="fa fa-angle-left slick-arrow slick-prev"></i>',
    nextArrow: '<i class="fa fa-angle-right slick-arrow slick-next"></i>',
});

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container" style="margin-bottom: 30px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1">スライド1</div>
        <div class="swiper-slide slide2">スライド2</div>
        <div class="swiper-slide slide3">スライド3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

/* スライドの幅と高さ */
.swiper-container {
    width: 350px;
    height: 200px;
}
/* サンプルの文字の色などの調整 */
.swiper-slide {
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
/* 矢印の色、初期状態では青色になる */
.swiper-button-prev, .swiper-button-next {
    color: white;
}
.slide1 {
    background: red;
}
.slide2 {
    background: green;
}
.slide3 {
    background: blue;
}

new Swiper('.swiper-container', {
    loop: true, // 最後のスライドの後は最初のスライドに戻るならtrue
    navigation: { // 前後の矢印のクラス名を指定
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next',
    },
    autoplay: {
        delay: 3000, // 自動再生する場合の実行間隔
        disableOnInteraction: false, // 矢印やスワイプでスライド切り替わった場合、自動再生を停止するか、再開したいのでfalse
    },
    speed: 500, // スライドの切り替わる時間
});