我需要制作一个带有侧边栏/垂直缩略图部分的猫头鹰轮播，作为最新新闻部分。但是，将缩略图替换为包含下一张幻灯片内容的框。我还需要一个文本部分。我想出了以下代码，但我不知道如何处理它。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="owl-carousel owl-theme" id="sync1">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
<div class="owl-carousel owl-theme" id="sync2">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
</body>
</html>
CSS:
#sync1 {
.item {
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
}
#sync2 {
.item {
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
h1 {
font-size: 18px;
}
}
.current .item {
background: #0c83e7;
}
}
.owl-theme {
.owl-nav {
/*default owl-theme theme reset .disabled:hover links */
[class*='owl-'] {
transition: all .3s ease;
&.disabled:hover {
background-color: #D6D6D6;
}
}
}
}
//arrows on first carousel
#sync1.owl-theme {
position: relative;
.owl-next, .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
.owl-prev {
left: 10px;
}
.owl-next {
right: 10px;
}
}
Javascript
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
autoplay: true,
dots: true,
loop: true,
responsiveRefreshRate: 200,
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2.on('initialized.owl.carousel', function() {
sync2.find(".owl-item").eq(0).addClass("current");
}).owlCarousel({
items: slidesPerPage,
dots: true,
nav: true,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
//end block
sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
这就是我想要的外观。 /image/MtBRf.png
最佳答案
这是 slick 插件的解决方案:
$('.slider').slick({
slidesToShow: 7,
slidesToScroll: 1,
responsive: [
{
breakpoint: 866,
settings: {
slidesToShow: 7
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 5
}
},
{
breakpoint: 320,
settings: {
slidesToShow: 3
}
}]
});
html代码:
<div class="slider slider-nav">
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
<div class="item">
<p>4</p>
</div>
<div class="item">
<p>5</p>
</div>
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
<div class="item">
<p>4</p>
</div>
<div class="item">
<p>5</p>
</div>
</div>
关于javascript - 如何用文本替换垂直缩略图创建猫头鹰轮播？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50601117/