javascript - 我想与滑块一起滑动/移动猫头鹰点
问题描述
我想移动图像中显示的导航点与滑块一起移动,当单击每个栏时应该导航到相关的滑块。(更改活动类)我不希望它在横幅上保持静止。[![在此处输入图像描述][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 -->
但是当我点击它们时它不会改变。任何人都可以帮忙吗?
解决方案
我建议保留控件。但是,如果这是硬性要求,那么这里就是您如何维护控件的活动状态。我随机提取了一些样式,以便将简单的工作解决方案放在一起。我希望这有帮助。
$(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>
推荐阅读
- android - 向用户组发送通知
- azure - Azure CDN for Azure 静态网站 301 重定向配置
- c# - 如何为每个新打开的 Excel 文档添加新的 CustomTaskPane?
- html - HTML 登录和登录按钮不起作用
- c++ - 如何将函数指针传递给方法,以便可以在 Qt 的 connect() 中使用?
- python - Python - 最准确的时间、时区、日历库/模块
- angular - 如何在 e2e 中设置代理身份验证?
- python - 从熊猫数据框中永久删除行
- c++ - “使用命名空间”子句在什么范围内有效?
- c - 启用在 macbook 上编译 sdl 1.2 项目