我想将猫头鹰轮播替换为滑动滑块。我尝试了很多但是    仍然，我不知道将猫头鹰轮播转换为滑动滑块的想法。 请提供任何文章，以便对我有帮助。

猫头鹰轮播源代码：     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,480: {
            slidesPerView: 1,spaceBetween: 10
        }
     }
   });
 });

codepen

请，有人向我建议。如何将猫头鹰转盘替换为滑动滑块。    预先感谢...