我想与滑块一起滑动/移动猫头鹰点

Question

我想移动图像中显示的导航点与滑块一起移动，单击每个栏时应导航到相关的滑块。更改活动类( 我不希望它停留在横幅上。 [![在此输入图像描述][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 -->

但是当我单击它们时它不会改变。谁能帮忙？

Answer 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>