javascript - 切换时多个滑块崩溃
问题描述
当我在 html 中添加滑块 #2 时滑块崩溃，但当我删除第二部分时它工作正常。我的目标是独立控制 2 个独立的滑块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Free Html Modules - Alpha Universe</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.aspect-three-two {
position: relative;
overflow: hidden;
}
.aspect-three-two:before {
display: block;
content: "";
width: 100%;
padding-top: 66.66667%;
}
.aspect-three-two>div,
.aspect-three-two>img,
.aspect-three-two>.card,
.aspect-three-two>.card-post,
.aspect-three-two>.au-slider-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.aspect-three-two>.card {
min-height: 0;
}
.aspect-three-two>img {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.au-slider {
position: relative;
height: 100%;
padding: 0;
margin-bottom: 0;
}
.au-slider__container {
max-width: 1240px;
margin: 0 auto;
}
.au-slider__items {
position: absolute;
width: 80%;
height: 80%;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.au-slider__items.main-pos .au-slider__item {
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(6.51%, rgba(255, 255, 255, .042)), color-stop(9.485%, rgba(255, 255, 255, .089)), color-stop(12.25%, rgba(255, 255, 255, .147)), color-stop(14.805%, rgba(255, 255, 255, .213)), color-stop(17.185%, rgba(255, 255, 255, .283)), color-stop(19.425%, rgba(255, 255, 255, .357)), color-stop(21.56%, rgba(255, 255, 255, .433)), color-stop(23.625%, rgba(255, 255, 255, .511)), color-stop(25.62%, rgba(255, 255, 255, .591)), color-stop(27.545%, rgba(255, 255, 255, .672)), color-stop(29.435%, rgba(255, 255, 255, .753)), color-stop(31.29%, rgba(255, 255, 255, .834)), color-stop(33.145%, rgba(255, 255, 255, .917)), color-stop(35%, white), color-stop(65%, white), color-stop(66.855%, rgba(255, 255, 255, .917)), color-stop(68.71%, rgba(255, 255, 255, .834)), color-stop(70.565%, rgba(255, 255, 255, .753)), color-stop(72.455%, rgba(255, 255, 255, .672)), color-stop(74.38%, rgba(255, 255, 255, .591)), color-stop(76.375%, rgba(255, 255, 255, .511)), color-stop(78.44%, rgba(255, 255, 255, .433)), color-stop(80.575%, rgba(255, 255, 255, .357)), color-stop(82.815%, rgba(255, 255, 255, .283)), color-stop(85.195%, rgba(255, 255, 255, .213)), color-stop(87.75%, rgba(255, 255, 255, .147)), color-stop(90.515%, rgba(255, 255, 255, .089)), color-stop(93.49%, rgba(255, 255, 255, .042)), color-stop(96.71%, rgba(255, 255, 255, .011)), to(rgba(255, 255, 255, 0)));
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .011) 3.29%, rgba(255, 255, 255, .042) 6.51%, rgba(255, 255, 255, .089) 9.485%, rgba(255, 255, 255, .147) 12.25%, rgba(255, 255, 255, .213) 14.805%, rgba(255, 255, 255, .283) 17.185%, rgba(255, 255, 255, .357) 19.425%, rgba(255, 255, 255, .433) 21.56%, rgba(255, 255, 255, .511) 23.625%, rgba(255, 255, 255, .591) 25.62%, rgba(255, 255, 255, .672) 27.545%, rgba(255, 255, 255, .753) 29.435%, rgba(255, 255, 255, .834) 31.29%, rgba(255, 255, 255, .917) 33.145%, white 35%, white 65%, rgba(255, 255, 255, .917) 66.855%, rgba(255, 255, 255, .834) 68.71%, rgba(255, 255, 255, .753) 70.565%, rgba(255, 255, 255, .672) 72.455%, rgba(255, 255, 255, .591) 74.38%, rgba(255, 255, 255, .511) 76.375%, rgba(255, 255, 255, .433) 78.44%, rgba(255, 255, 255, .357) 80.575%, rgba(255, 255, 255, .283) 82.815%, rgba(255, 255, 255, .213) 85.195%, rgba(255, 255, 255, .147) 87.75%, rgba(255, 255, 255, .089) 90.515%, rgba(255, 255, 255, .042) 93.49%, rgba(255, 255, 255, .011) 96.71%, rgba(255, 255, 255, 0) 100%);
}
.au-slider__item {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: background 0.3s ease-in-out .2s;
transition: background 0.3s ease-in-out .2s;
}
.au-slider__figure {
position: absolute;
max-width: 100%;
max-height: 100%;
margin: 0;
width: 100%;
height: 100%;
}
.au-slider__img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
z-index: 2;
display: block;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: width .3s ease-in-out .3s;
transition: width .3s ease-in-out .3s;
}
.au-slider__caption {
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: bottom .2s ease-in-out, right .2s ease-in-out, width .2s ease-in-out, opacity .1s ease-in-out;
transition: bottom .2s ease-in-out, right .2s ease-in-out, width .2s ease-in-out, opacity .1s ease-in-out;
width: 100%;
padding-top: 4px;
opacity: 0;
}
.au-slider__video-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.au-slider__video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.au-slider__nav {
position: absolute;
top: 0;
height: 80%;
width: 100%;
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
justify-content: space-between;
}
.au-slider__nav-item {
height: 100%;
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
align-items: center;
background-color: white;
z-index: 4;
}
.au-slider__nav-item--prev {
padding-right: 3%;
}
.au-slider__nav-item--next {
padding-left: 3%;
}
.au-slider__next,
.au-slider__prev {
padding: 4px;
cursor: pointer;
height: 90%;
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
align-items: center;
}
.au-slider .main-pos {
margin-left: 10% !important;
z-index: 20;
background-size: 0 0;
}
.au-slider .main-pos .au-slider__caption {
opacity: 1;
}
.au-slider .left-pos,
.au-slider .right-pos {
opacity: .3;
z-index: 3;
-webkit-transform: scale(.8);
transform: scale(.8);
}
.au-slider .left-pos .au-slider__video-wrapper,
.au-slider .right-pos .au-slider__video-wrapper {
pointer-events: none;
}
.au-slider .left-pos {
margin-left: -4% !important;
}
.au-slider .left-pos .au-slider__img {
left: 0;
-webkit-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
}
.au-slider .back-pos {
margin-left: 10% !important;
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
.au-slider .right-pos {
margin-left: 24% !important;
}
.au-slider .right-pos .au-slider__img {
left: 100%;
-webkit-transform: translateX(-100%) translateY(-50%);
transform: translateX(-100%) translateY(-50%);
}
.au-photo__meta {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
padding-top: 4px;
margin: 0;
}
.au-photo__meta-item {
font-family: "SST W01 Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #676767 !important;
font-size: .75rem;
line-height: 1.8;
letter-spacing: .07em;
}
</style>
</head>
<body>
<section id="html-template-emea-image-carousel">
<div class="container-fluid">
<h2 class="text-center mb-4" data-label="Module Heading">Gallery</h2>
<div class="aspect-three-two au-slider__container">
<div>
<ul class="au-slider">
<li class="au-slider__items" data-slide-id="1">
<div class="au-slider__item">
<figure class="au-slider__figure">
<img class="au-slider__img" src="https://placeimg.com/1600/1066/any?v=1" alt="" data-label="Item 1 - Image">
<div class="au-slider__caption d-none d-md-block">
<ul class="au-photo__meta">
<li class="au-photo__meta-item t-micro text-light" data-label="Item 1 - Caption" >test 1</li>
</ul>
</div>
</figure>
</div>
</li>
<li class="au-slider__items" data-slide-id="2">
<div class="au-slider__item">
<figure class="au-slider__figure">
<img class="au-slider__img" src="https://placeimg.com/1600/1066/any?v=2" alt="" data-label="Item 2 - Image">
<div class="au-slider__caption d-none d-md-block">
<ul class="au-photo__meta">
<li class="au-photo__meta-item t-micro text-light" data-label="Item 2 - Caption" >test 2 </li>
</ul>
</div>
</figure>
</div>
</li>
<li class="au-slider__items" data-slide-id="3">
<div class="au-slider__item">
<figure class="au-slider__figure">
<img class="au-slider__img" src="https://placeimg.com/1600/1066/any?v=3" alt="" data-label="Item 3 - Image">
<div class="au-slider__caption d-none d-md-block">
<ul class="au-photo__meta">
<li class="au-photo__meta-item t-micro text-light" data-label="Item 3 - Caption" >test 3</li>
</ul>
</div>
</figure>
</div>
</li>
</ul>
<div class="au-slider__nav">
<div class="au-slider__nav-item au-slider__nav-item--prev">
<span class="au-prev au-slider__prev icon-arrow-left text-primary" style="font-size: 12px"
data-label="Left Arrow (Don't Change)" data-translate="no">◀</span>
</div>
<div class="au-slider__nav-item au-slider__nav-item--next">
<span class="au-next au-slider__next icon-arrow-right text-primary" style="font-size: 12px"
data-label="Right Arrow (Don't Change)" data-translate="no">▶</span>
</div>
</div>
</div>
</div>
</div>
<!--Slider 2-->
<div class="container-fluid">
<h2 class="text-center mb-4" data-label="Module Heading">Gallery</h2>
<div class="aspect-three-two au-slider__container">
<div>
<ul class="au-slider">
<li class="au-slider__items" data-slide-id="1">
<div class="au-slider__item">
<figure class="au-slider__figure">
<img class="au-slider__img" src="https://placeimg.com/1600/1066/any?v=1" alt="" data-label="Item 1 - Image">
<div class="au-slider__caption d-none d-md-block">
<ul class="au-photo__meta">
<li class="au-photo__meta-item t-micro text-light" data-label="Item 1 - Caption" >test 1</li>
</ul>
</div>
</figure>
</div>
</li>
<li class="au-slider__items" data-slide-id="2">
<div class="au-slider__item">
<figure class="au-slider__figure">
<img class="au-slider__img" src="https://placeimg.com/1600/1066/any?v=2" alt="" data-label="Item 2 - Image">
<div class="au-slider__caption d-none d-md-block">
<ul class="au-photo__meta">
<li class="au-photo__meta-item t-micro text-light" data-label="Item 2 - Caption" >test 2 </li>
</ul>
</div>
</figure>
</div>
</li>
<li class="au-slider__items" data-slide-id="3">
<div class="au-slider__item">
<figure class="au-slider__figure">
<img class="au-slider__img" src="https://placeimg.com/1600/1066/any?v=3" alt="" data-label="Item 3 - Image">
<div class="au-slider__caption d-none d-md-block">
<ul class="au-photo__meta">
<li class="au-photo__meta-item t-micro text-light" data-label="Item 3 - Caption" >test 3</li>
</ul>
</div>
</figure>
</div>
</li>
</ul>
<div class="au-slider__nav">
<div class="au-slider__nav-item au-slider__nav-item--prev">
<span class="au-prev au-slider__prev icon-arrow-left text-primary" style="font-size: 12px"
data-label="Left Arrow (Don't Change)" data-translate="no">◀</span>
</div>
<div class="au-slider__nav-item au-slider__nav-item--next">
<span class="au-next au-slider__next icon-arrow-right text-primary" style="font-size: 12px"
data-label="Right Arrow (Don't Change)" data-translate="no">▶</span>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var auSlider = (function () {
var startItem = 1;
function init(elem) {
var thisSwap = swap.bind(elem);
elem.find('.au-next').click(function () {
thisSwap('clockwise');
});
elem.find('.au-prev').click(function () {
thisSwap('counter-clockwise');
});
var sliderInitItems = elem.find('.au-slider__items');
var sliderInitLength = sliderInitItems.length;
sliderInitItems.each(function (index, element) {
if ($(element).attr('data-slide-id') == 1) {
$(element).addClass('main-pos');
} else if ($(element).attr('data-slide-id') == 2) {
$(element).addClass('right-pos');
} else if ($(element).attr('data-slide-id') == (sliderInitLength)) {
$(element).addClass('left-pos');
} else {
$(element).addClass('back-pos');
}
});
elem.find('.au-slider__items').on('click', function () {
if (elem.attr('class') == 'au-slider__items left-pos') {
thisSwap('counter-clockwise');
} else {
thisSwap('clockwise');
}
});
animateCaption(elem.find('.main-pos'));
positionCaption(elem.find('.main-pos'));
}
function animateCaption(slide, show) {
if (show === undefined) {
show = !0;
}
var currentCaption = $(slide).find('.au-slider__caption');
var captionPos = positionCaption(slide);
if (show) {
captionPos.bottom -= currentCaption.height();
captionPos.bottom += "px";
} else {
captionPos.bottom += currentCaption.height();
captionPos.bottom += "px";
}
currentCaption.css(captionPos);
}
function positionCaption(slide) {
var slideImage = $(slide).find('.au-slider__img');
var posX = ((slide.width() - slideImage.width()) / 2) + 'px';
var posY = ((slide.height() - slideImage.height()) / 2 - 4);
var capWidth;
if ($(window).width() > 1024) {
capWidth = slideImage.width() + 'px';
} else {
posX = "auto";
capWidth = "100%";
}
return {
right: posX,
bottom: posY,
width: capWidth,
};
}
function swap(action) {
var direction = action;
var position = 0;
var sliderItems = this.find('.au-slider__items');
var itemCount = sliderItems.length;
var resetCount = itemCount;
function pos(positionvalue) {
if (positionvalue != 'leftposition') {
position++;
if ((startItem + position) > resetCount) {
position = 1 - startItem;
}
}
if (positionvalue == 'leftposition') {
position = startItem - 1;
if (position < 1) {
position = itemCount;
}
}
return position;
}
if (direction == 'counter-clockwise') {
var leftitem = this.find('.left-pos').attr('data-slide-id') - 1;
if (leftitem === 0) {
leftitem = itemCount;
}
this.find('.right-pos').removeClass('right-pos').addClass('back-pos');
this.find('.main-pos').removeClass('main-pos').addClass('right-pos');
this.find('.left-pos').removeClass('left-pos').addClass('main-pos');
this.find('[data-slide-id="' + leftitem + '"]').removeClass('back-pos').addClass('left-pos');
this.find('.left-pos .au-slider__caption').css('bottom', 0);
this.find('.left-pos .au-slider__caption').css('bottom', 0);
startItem--;
if (startItem < 1) {
startItem = itemCount;
}
animateCaption($('.main-pos'));
animateCaption($('.left-pos'), false);
}
if (direction === 'clockwise' || direction === '' || direction === null) {
var rightItem = (itemCount < 4) ? 3 : parseInt(this.find('.right-pos').attr('data-slide-id')) + 1;
if (rightItem > itemCount) {
rightItem = 1;
}
this.find('.left-pos').removeClass('left-pos').addClass('back-pos');
this.find('.main-pos').removeClass('main-pos').addClass('left-pos');
this.find('.right-pos').removeClass('right-pos').addClass('main-pos');
if (itemCount < 4) {
this.find('.back-pos').removeClass('back-pos').addClass('right-pos');
} else {
this.find('[data-slide-id="' + rightItem + '"]').removeClass('back-pos').addClass('right-pos');
}
this.find('.left-pos .au-slider__caption').css('bottom', 0);
this.find('.left-pos .au-slider__caption').css('bottom', 0);
startItem++;
position = 0;
if (startItem > itemCount) {
startItem = 1;
}
animateCaption($('.main-pos'));
animateCaption($('.right-pos'), false);
}
animateCaption(this.find('.main-pos'));
}
return {
init: init,
positionCaption: positionCaption
};
})();
auSlider.init($('.au-slider__container'));
setInterval(function () {
var css = auSlider.positionCaption($('.main-pos'));
$(".main-pos .au-slider__caption").css({
right : css.right,
bottom : css.bottom - 25,
width : css. width
});
}, 200);
</script>
</body>
</html>
- 滑块部分位于标签下方
codepen链接 提前感谢您的帮助..（：
当我在 html 中添加滑块 #2 时滑块崩溃，但当我删除第二部分时它工作正常。我的目标是独立控制 2 个独立的滑块。
解决方案
尤努斯，
问题正在发生，因为您像这样安装滑块：auSlider.init($('.au-slider__container'));，因此选择器会选择该类的所有元素，并且在您开始移动地图后不知何故它会丢失。
您可以通过一个一个安装来解决这个问题，如下所示：
auSlider.init($('.au-slider__container:eq(0)'));
auSlider.init($('.au-slider__container:eq(1)'));
看看小提琴的工作原理：https ://codepen.io/lessadiogo/pen/BayPbKJ
干杯，
迪奥戈
推荐阅读
- java - 如何从数组中选择 3 个位置，选择后删除每个位置？
- java - Pageable 不适用于 Springboot 中的 @Query
- android - 在颤振中使用 Cloud Firestore 执行搜索时出错
- c++ - MinGW 中字符串长度超过 15 个字符的问题
- angularjs - 如何在angularjs中更新数组列表对象
- mongodb - 如何查找正在分组的 mongodb 中的聚合集合？
- html - 如何在 Bootstrap 面板中拆分“标题”和“图标”？
- asp.net-web-api2 - 如何在条件发生时调用控制器方法
- javascript - 将数字转换为墨西哥比索字母
- javascript - 如何将验证添加到 textarea 最少 250 和最多 1000 字数？