问题描述：
本人能力有限无法实现需要的功能
简单概况需求如题：
已有群友做一HTML：
实现了图片样式和滚动
<html lang="en"><head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TaylorLottner/cutemoe@main/docs.theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TaylorLottner/cutemoe@main/owl.carousel.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/TaylorLottner/cutemoe@main/owl.carousel.js"></script>
</head>
<body>
<!-- body -->
<div class="home-demo">
<div class="row">
<div class="large-12 columns">
<div class="owl-carousel owl-loaded owl-drag">
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1960px, 0px, 0px); transition: all 0s ease 0s; width: 7514px;"><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Easy</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Free</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Upgradable</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Tons of options</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Infinity</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Auto Width</h2>
</div></div><div class="owl-item active" style="width: 316.667px; margin-right: 10px;"><div class="item" onclick="window.open('https://www.baidu.com','_self')">
<h2>Swipe</h2>
</div></div><div class="owl-item active" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Drag</h2>
</div></div><div class="owl-item active" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Responsive</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>CSS3</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Fast</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Easy</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Free</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Upgradable</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Tons of options</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Infinity</h2>
</div></div><div class="owl-item" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Auto Width</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item" onclick="window.open('https://www.baidu.com','_self')">
<h2>Swipe</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Drag</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Responsive</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>CSS3</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Fast</h2>
</div></div><div class="owl-item cloned" style="width: 316.667px; margin-right: 10px;"><div class="item">
<h2>Easy</h2>
</div></div></div></div><div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div><div class="owl-dots"><button role="button" class="owl-dot active"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button></div></div>
</div>
</div>
</div>
<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
})
</script>
</body></html>
