使用幻灯片插件Owl-carousel实现轮播效果

tuokin • 2023年11月28日 • 网站建设 569

1、HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Owl-Carousel Slider | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入owlcarousel库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="carousel owl-carousel">
            <div class="card card-1">A</div>
            <div class="card card-2">B</div>
            <div class="card card-3">C</div>
            <div class="card card-4">D</div>
            <div class="card card-5">E</div>
        </div>  
    </div>

    <script>
$(document).ready(function(){
  $('.carousel').owlCarousel({
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:2000, //2000 ms= 2 s
    autoplayHoverPause:true,
    responsive:{
      0:{
        items: 1,
        nav:false
      },
      600:{
        items: 3,
        nav:false
      },
      1000:{
        items: 4,
        nav:false
      }
    }
  })
});
</script>


</body>
</html>

2、style样式


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.wrapper{
  width: 100%;
  
}
.wrapper .carousel{
    max-width: 1200px;
    margin: auto;
    padding: 0 30px;
}
.carousel .card{
  
  
  line-height: 250px;
  text-align: center;
  color: #fff;
  font-size: 90px;
  font-weight: 600;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}
.carousel .card-1{
    background: #ed1c24;
}
.carousel .card-2{
    background: #0072bc;
}
.carousel .card-3{
    background: #39b54a;
}
.carousel .card-4{
    background: #f26522;
}
.carousel .card-5{
    background: #630460;
}
.owl-dots{
    text-align: center;
    margin-top: 40px;
}
.owl-dot{
    height: 15px;
    width: 45px;
    border-radius: 25px;
    cursor: pointer;
    outline: none;
    margin: 0 5px;
    border: 2px solid #0072bc!important;
    transition: all 0.3s ease;
}
.owl-dot:hover,
.owl-dot .active{
    background: #0072bc!important;
}

发表评论取消回复