Заменить сову карусели в слайдер

Question

Я хочу заменить совую карусель на слайдер. Я много пробовал, но все же, у меня не возникает идея превратить сову-карусель в слайдер. Пожалуйста, предоставьте любую статью, чтобы она мне помогла.

Исходный код совы-карусели: HTML

<div class="carousel-wrap">
<div class="owl-carousel">
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>
 <div class="item"><img src="https://placehold.it/150x150"></div>

CSS

.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100; 
  -webkit-backface-visibility: hidden; 
}

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}

JS

$('.owl-carousel').owlCarousel({
 loop: true,
 margin: 10,
 nav: true,
 navText: [
 "<i class='fa fa-caret-left'></i>",
 "<i class='fa fa-caret-right'></i>"
 ],
 autoplay: true,
 autoplayHoverPause: true,
 responsive: {
 0: {
   items: 1
 },
 600: {
   items: 3
 },
 1000: {
   items: 5
 }
}
})

codepen

слайдер-слайдерисходный код: HTML

 <div class="container">   
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS

html, body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
.container{
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

JS

$(document).ready(function() {
 // Swiper: Slider
 new Swiper('.swiper-container', {
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 3,
    paginationClickable: true,
    spaceBetween: 20,
    breakpoints: {
        1920: {
            slidesPerView: 3,
            spaceBetween: 30
        },
        1028: {
            slidesPerView: 2,
            spaceBetween: 30
        },
        480: {
            slidesPerView: 1,
            spaceBetween: 10
        }
     }
   });
 });

codepen

Пожалуйста, кто-нибудь подскажет мне. как заменить совую карусель на слайдер. Заранее спасибо ...