<h1 style="display:none;">to2.kr/bsM</h1>
  <!-- 제이쿼리 불러오기 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- 아울 캐러셀 불러오기 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

  <!-- 슬라이더 1 -->
  <div class="my-slider-1">
    <div class="owl-carousel owl-theme">
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/06/02/11/09/watercolor-5250481_960_720.jpg" alt=""></div>
        <div class="item"><img src="https://cdn.pixabay.com/photo/2018/03/22/16/17/dress-3250938_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/07/04/11/01/paris-watercolor-5369159_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2016/01/05/14/35/paris-1122617_960_720.jpg" alt=""> </div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/06/05/08/34/watercolor-paris-balcony-5262027_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/07/04/11/01/watercolor-paris-5369161_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/05/24/07/23/watercolor-paris-shops-5212794_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/07/05/23/18/paris-watercolor-5374819_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/06/02/11/25/watercolor-5250585_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/05/29/06/37/cafe-de-flore-5233973_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/05/24/07/19/watercolor-paris-balcony-5212780_960_720.jpg" alt=""></div>
      <div class="item"><img src="https://cdn.pixabay.com/photo/2020/06/12/18/18/vintage-5291352_960_720.jpg" alt=""></div>
    </div>
  </div>
body, ul, li {
  margin:0;
}
.my-slider-1 .item {
  
  height:80vh;
  font-size:15rem;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.my-slider-1 .item > img{
   height :80vh
}
function MySlider1__init() {
  $('.my-slider-1 > .owl-carousel').owlCarousel({
    responsive:{
      0:{
        items:3
      }
    },
    margin: 10,
    loop:true,
    dots:true,
    nav:true,
    navText: ['< PRE', 'NEXT >'],
    center:true,
    autoplay: true,
    autoplayTimeout: 500,
    autoplayHoverPause: true
  });
}
MySlider1__init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.