Javascript 切换时多滑块崩溃
在html中将slider#2添加到中时，slider崩溃，但在删除第二部分时效果良好。我的目标是独立控制两个独立的滑块Javascript 切换时多滑块崩溃,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,在html中将slider#2添加到中时，slider崩溃，但在删除第二部分时效果良好。我的目标是独立控制两个独立的滑块 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="viewport" cont
<!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>
免费Html模块-阿尔法宇宙
html，
身体{
保证金：0；
填充：0；
}
.方位三二{
位置：相对位置；
溢出：隐藏；
}
.方面三二：前{
显示：块；
内容：“；
宽度：100%；
垫面：66.66667%；
}
.方位三二>分区，
.方面三二>img，
.aspect three two>.card，
.aspect three two>.card post，
.aspect three two>.au滑块容器{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.aspect three two>.card{
最小高度：0；
}
.方面三2>img{
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
.au滑块{
位置：相对位置；
身高：100%；
填充：0；
页边距底部：0；
}
.au-slider\u容器{
最大宽度：1240px；
保证金：0自动；
}
.au-slider\u项目{
位置：绝对位置；
宽度：80%；
身高：80%；
显示：内联块；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
.au-slider\uuu项目.main-pos.au-slider\uu项目{
背景：-webkit渐变（线性、左上、右上、from（rgba（255、255、255、0））、颜色停止（6.51%、rgba（255、255、255、042））、颜色停止（9.485%、rgba（255、255、255、089））、颜色停止（12.25%、rgba（255、255、255、147））、颜色停止（14.805%、rgba（255、255、255、213））、颜色停止（17.185%、rgba（255、255、255、283））、颜色停止（19.425%、rgba）颜色停止（21.56%，rgba（255，255，255，.433）），颜色停止（23.625%，rgba（255，255，255，.511）），颜色停止（25.62%，rgba（255，255，255，.591）），颜色停止（27.545%，rgba（255，255，255，.672）），颜色停止（29.435%，rgba（255，255，255，.753）），颜色停止（31.29%，rgba（255，255，255，.834）），颜色停止（33.145%，rgba颜色停止（35%，白色），颜色停止（65%，白色），颜色停止（66.855%，rgba（255，255，255，.917）），颜色停止（68.71%，rgba（255，255，255，.834）），颜色停止（70.565%，rgba（255，255，255，.753）），颜色停止（72.455%，rgba（255，255，255，.672）），颜色停止（74.38%，rgba（255，255，255，.591）），颜色停止（76.375%，rgba颜色停止（78.44%，rgba（255，255，255，.433）），颜色停止（80.575%，rgba（255，255，255，.357）），颜色停止（82.815%，rgba（255，255，255，.283）），颜色停止（85.195%，rgba（255，255，255，.213）），颜色停止（87.75%，rgba（255，255，255，255，.147）），颜色停止（90.515%，rgba（255，255，255，.089）），颜色停止（93.49%，rgba颜色停止（96.71%，rgba（255，255，255，011）），至（rgba（255，255，255，0））；
背景：线性梯度（90度，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、213）14.805%，rgba（255、255、255、283）17.185%，rgba（255、255、255、255、357）19.425%，rgba（255、255、255、255、255、255、433）21.56%（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%、白色35%、白色65%、rgba（255、255、255、255、255、917）66.855%、rgba（255、255、255、255、255、834）68.71%、rgba（255、255、255、255、255、753）70.5%（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，255，.213）85.195%，rgba（255，255，255，255，.147）87.75%，rgba（255，255，255，255，255，255，255，.089）90.515%，rgba（255，255，255，255，255，.49%，rgba（255,255,255,011）96.71%，rgba（255,255,255,0）100%；
}
.au-slider\u项目{
位置：相对位置；
宽度：100%；
身高：100%；
-webkit过渡：背景0.3s轻松输入输出.2s；
过渡：背景0.3s缓进缓出.2s；
}
.au-slider\u图{
位置：绝对位置；
最大宽度：100%；
最大高度：100%；
保证金：0；
宽度：100%；
身高：100%；
}
.au-slider\uuu img{
位置：绝对位置；
最高：50%；
左：50%；
最大宽度：100%；
最大高度：100%；
z指数：2；
显示：块；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
-webkit过渡：宽度。3s易入易出。3s；
过渡：宽度。3s缓进缓出。3s；
}
.au-slider\u标题{
位置：绝对位置；
底部：0；
右：0；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit过渡：底部。2秒缓进缓出，右侧。2秒缓进缓出，宽度。2秒缓进缓出，不透明度。1秒缓进缓出；
过渡：底部。2秒缓进缓出，右侧。2秒缓进缓出，宽度。2秒缓进缓出，不透明度。1秒缓进缓出；
宽度：100%；
垫面：4px；
不透明度：0；
}
.au-slider\uuuu视频包装器{
位置：相对位置；
身高：100%；
宽度：100%；
}
auSlider.init($('.au-slider__container:eq(0)'));
auSlider.init($('.au-slider__container:eq(1)'));