【问题标题】：I want to slide/move the owl-dots along with the sliders我想与滑块一起滑动/移动猫头鹰点
【发布时间】：2020-08-29 22:24:13
【问题描述】：
我想移动图像中显示的导航点与滑块一起移动，单击每个栏时应导航到相关滑块。（更改活动类）
我不希望它停留在横幅上。 [![在此处输入图片描述][1]][1]
[1]：
我已经设法使用 html 移动导航点。
$(function () {
$('.owl-dot').on('click', function () {
$(this).parent().find('.owl-dot.active').removeClass('active');
$(this).addClass('active');
});
});
<div class="banner-slider-item1">
<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>
<img class="img-fluid temp-slide2" src="~/Images/home-slider.jpg" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="banner-content">
<h1 class="banner-content-head">
the finest notebooks for the best brands
</h1>
<p>for a new freedom – and more than just beautiful books with a logo</p>
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-item1">
<div class="owl-dots">
<button role="button" class="owl-dot "><span></span></button>
<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>
</div>
<img class="img-fluid temp-slide2" src="~/Images/slide2.jpg" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="banner-content">
<h1 class="banner-content-head">
a reliable and multifunctional platform for business.
</h1>
<p>for a new freedom – and more than just beautiful books with a logo</p>
</div>
</div>
</div>
</div>
</div><!-- banner-slider-item end -->
但是当我点击它们时它不会改变。有人可以帮忙吗？
【问题讨论】：
标签：
javascript
jquery
css
slider
owl-carousel
【解决方案1】：
我建议不要使用控件。但是，如果这是硬性要求，那么您可以如何维护控件的活动状态。我随机提取了一些样式，以便将简单的工作解决方案放在一起。我希望这会有所帮助。
$(function() {
$('.owl-dot').on('click', function() {
// dot element
const $this = $(this);
// take action only if the current slide is not active
if (!$this.hasClass('active')) {
// dot elment index
const idx = $this.index();
// slides container
const $slideContainer = $this.closest('.slide-container');
// set active state and remove that for other siblings
$this.siblings().removeClass('active');
$this.addClass('active');
// get parent of slide to which we need to move
const $targetSlide = $slideContainer.find('.banner-slider-item').eq(idx);
// now set the active state in target slide
$targetSlide.find('.owl-dot').removeClass('active');
$targetSlide.find('.owl-dot').eq(idx).addClass('active');
// finally move the slide
$slideContainer.css({
marginLeft: (-500 * idx) + 'px'
});
}
});
});
.slide-window {
display: flex;
width: 500px;
height: 300px;
overflow: hidden;
}
.slide-container {
position: relative;
display: flex;
transition: all 1s;
transition-timing-function: ease;
}
.banner-slider-item {
position: relative;
}
.owl-dot {
cursor: pointer;
width: 25px;
height: 8px;
border: 0;
background-color: #ee4266;
}
.owl-dot:hover {
background-color: #fff361;
}
.owl-dot.active {
background-color: #FFD23F;
}
.banner-slider-item .container {
position: absolute;
top: 25%;
height: 60%;
right: 0;
width: 70%;
background-color: rgba(20, 20, 20, 0.6);
color: #fff;
padding: 15px 20px;
font-family: Helvetica-Neue, Arial;
}
.banner-slider-item .container h1 {
font-size: 1.6rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-window">
<div class="slide-container">
<div class="banner-slider-item">
<img class="img-fluid temp-slide2" src="https://picsum.photos/id/0/500/300" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="banner-content">
<h1 class="banner-content-head">
the finest notebooks for the best brands
</h1>
<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>
</div>
<p>for a new freedom – and more than just beautiful books with a logo</p>
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-item">
<img class="img-fluid temp-slide2" src="https://picsum.photos/id/1/500/300" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="banner-content">
<h1 class="banner-content-head">
a reliable and multi-functional platform for business.
</h1>
<div class="owl-dots">
<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>
<p>for a new freedom – and more than just beautiful books with a logo</p>
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-item">
<img class="img-fluid temp-slide2" src="https://picsum.photos/id/2/500/300" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="banner-content">
<h1 class="banner-content-head">
the finest notebooks for the best brands
</h1>
<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>
</div>
<p>for a new freedom – and more than just beautiful books with a logo</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>