jQuery/javascript循环滑块项目 [英] jquery/javascript loop slider item
本文介绍了jQuery/javascript循环滑块项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了具有动画效果的基本滑块，
我正在使用transform: translate3d向左或向右移动滑块，但在使它循环和无限地向左或向右滑动方面存在问题和一点点困惑.
我正在尝试做到这一点，因此当您单击左侧或右侧时，它会一直显示并旋转图像.
我还希望使用z-index进行平滑过渡，但这似乎是不可能的.
这是我完成的工作的jsFiddle https://jsfiddle.net/wo67h4n9/
这是HTML代码
<div class="vs-slider">
<div class="vss-wrap">
<div class="item active"><img src="http://lorempixel.com/430/280/sports" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="http://lorempixel.com/430/280/animals" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="http://lorempixel.com/430/280/nature" alt="Slider Item" width="430" height="280"></div>
</div>
<ul class="vss-nav">
<li class="prev"><</li>
<li class="next">></li>
</ul>
</div>
jQuery
;( function($) {
$(document).ready(function() {
$('.vs-slider .item').each( function() {
$(this).css('z-index', $('.vs-slider .item').length - $('.vs-slider .item').index(this));
});
$('.vss-nav').on('click', '.prev, .next', function() {
var active = $(this).closest('.vs-slider').find('.item.active');
if ( $(this).hasClass('next') ) {
vss_moveleft($('.vs-slider'));
active.next().addClass('active');
} else {
vss_moveleft( $('.vs-slider'), 'right');
active.prev().addClass('active');
}
active.removeClass('active');
});
function vss_moveleft( slider, type = 'left' ) {
var itemWidth = slider.find('.item').outerWidth() - 299,
itemTotal = slider.find('.item').length,
currentOff = slider.find('.vss-wrap').position().left,
movemVal = type === 'left' ? currentOff - itemWidth : currentOff + itemWidth;
slider.find('.vss-wrap').css('transform', 'translate3d('+ movemVal +'px, 0px, 0px)');
}
});
})(jQuery);
CSS
body {
background: #222
}
.vs-slider {
position: relative;
overflow: hidden;
max-height: 290px;
max-width: 500px;
}
.vs-slider img {
margin: 0;
vertical-align: top;
}
.vs-slider .vss-wrap {
min-width: 90VW;
transform: translate3d(0px, 0px, 0px);
transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
clear: both;
width: 100%;
display: block;
content: "";
}
.vs-slider .item {
float: left;
border: 1px solid #fff;
transform: scale(.7);
position: relative;
z-index: 1;
transition: all 1s ease 0s;
margin-right: -299px;
}
.vs-slider .item.active {
transform: scale(1);
z-index: 20 !important;
}
.vs-slider .item:not(.active) {
z-index: 0;
cursor: pointer;
}
.vss-nav {
position: absolute;
margin: 0;
padding: 0;
right: 5px;
bottom: 0;
}
.vss-nav li {
display: inline-block;
color: #fff;
margin: 0 5px;
cursor: pointer;
}
非常感谢您的帮助.
谢谢
解决方案
嘿，您做了一个有趣的问题，您需要关心一些事情才能实现自己的目标，所以我将解释您的缺失.
- 您可以使用纯CSS在不使用JS的情况下应用过渡，因此您需要的是兄弟姐妹选择器，这将帮助您将样式应用于特定元素右侧的所有元素.
例如:假设我们有一个简单的标记，例如
<div>
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
// Styles.css
.item.active ~ .item {
background: blue;
}
上面的样式将应用于.item.active元素右侧的item类的所有元素
-
对要应用的所有
item类应用样式，以将其扔到左侧. -
将
.item.active元素的样式应用为唯一显示的样式. -
要使滑块变得不定式，您需要检查用户何时单击"Next"和"Prev"箭头，并验证用户何时到达下一个或上一个元素的末尾，然后您需要获取第一个元素并在下一种情况下将其放在末尾，并在上一种情况下将最后一个元素置于开头.
-
您需要检查滑块何时启动，如果第一个元素处于活动状态，则需要克隆所有元素，并以相反的顺序将它们放在第一个元素之前.
因此，无需多说，这里需要一个有效的示例，这将帮助您极大地了解不定滑块的此功能.
;( function($) {
$(document).ready(function() {
/*
This function will check if the active class is in the first element then we will clone all elements at the left side of the first element to make it circular sliding
*/
function cloneElementsIfStartAtZero() {
var firstItem = $('.item').first();
var isActiveFirst = firstItem.hasClass('active');
if (isActiveFirst) {
var last = firstItem;
$($('.item').get().reverse()).each(function(){
var current = $(this).clone().removeClass('active');
last.before(current);
last = current;
});
}
}
cloneElementsIfStartAtZero();
$('.vss-nav').on('click', '.prev, .next', function() {
// we get the active, first, and last elements
var active = $('.item.active');
var first = $('.item').first();
var last = $('.item').last();
// if click at next arrow
if ( $(this).hasClass('next') ) {
// check if next element is the last, then take the first element and set it to the last element
if(active.next().next().length === 0) {
last.after(first);
}
// apply active class to make transition
active.next().addClass('active');
} else {
// check if prev element is the first, then take last element and set it before the first element
if(active.prev().length === 0 || active.prev().prev().length === 0) {
first.before(last);
}
// then appy active class to apply transition
active.prev().addClass('active');
}
active.removeClass('active');
});
function vss_moveleft( slider, type = 'left' ) {
var itemWidth = slider.find('.item').outerWidth() - 299,
itemTotal = slider.find('.item').length,
currentOff = slider.find('.vss-wrap').position().left,
movemVal = type === 'left' ? currentOff - itemWidth : currentOff + itemWidth;
slider.find('.vss-wrap').css('transform', 'translate3d('+ movemVal +'px, 0px, 0px)');
}
});
})(jQuery);
body {
background: #222
}
.vs-slider {
position: relative;
/* overflow: hidden;*/
max-height: 290px;
max-width: 500px;
margin: auto;
}
.vs-slider img {
margin: 0;
vertical-align: top;
}
.vs-slider .vss-wrap {
min-width: 90VW;
transform: translate3d(0px, 0px, 0px);
transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
clear: both;
width: 100%;
display: block;
content: "";
}
/* THIS WILL MAKE THE TRANSITION OVER CSS */
/*
This will throw all .item to the left at 50% relative to the container .vss-wrap
*/
.vs-slider .item {
transform: translate3d(-50%, 0, 0) scale(.7);
z-index: 1;
position: absolute;
opacity: .2;
transition: all 1s;
top: 0;
z-index: 1;
}
/*
This will show and apply the transition only to the .active element
*/
.vs-slider .item.active {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
z-index: 2;
position: relative;
}
/*
This will throw all elements set to the right of the .active element to 50% to the right and apply css styles
*/
.vs-slider .item.active ~ .item {
transform: translate3d(50%, 0, 0) scale(.7);
}
/* THIS WILL MAKE THE TRANSITION OVER CSS */
.vss-nav {
position: absolute;
margin: 0;
padding: 0;
right: 5px;
bottom: 0;
}
.vss-nav li {
display: inline-block;
color: #fff;
margin: 0 5px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vs-slider">
<div class="vss-wrap">
<div class="item active"><img src="https://i.guim.co.uk/img/media/59dee3fae368b6625fcd588cdc0c759f6aacd117/0_0_6100_3660/500.jpg?quality=85&auto=format&fit=max&s=998f324a337c7c17be1d754e3b856201" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="https://www.chileholidayarchitects.com/wp-content/uploads/2018/11/Chile-General-007-500x300.jpg" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDYTOz0c9d1h4Xj4HULfGeZVrQMw3zzA77vEPuX-RMY6ah8GkY" alt="Slider Item" width="430" height="280"></div>
</div>
<ul class="vss-nav">
<li class="prev"><</li>
<li class="next">></li>
</ul>
</div>
I created a basic slider with animation effect,
I'm using transform: translate3d to move the slider left or right and have an issue and a bit lost on how to make it loop and slide either left or right infinitely.
I'm trying to make it so when you click left or right it keeps showing and rotating the images.
I also wanted to have a smooth transition with z-index, but it doesn't seem possible.
Here's a jsFiddle of what I have accomplished https://jsfiddle.net/wo67h4n9/
here's the HTML code
<div class="vs-slider">
<div class="vss-wrap">
<div class="item active"><img src="http://lorempixel.com/430/280/sports" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="http://lorempixel.com/430/280/animals" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="http://lorempixel.com/430/280/nature" alt="Slider Item" width="430" height="280"></div>
</div>
<ul class="vss-nav">
<li class="prev"><</li>
<li class="next">></li>
</ul>
</div>
jQuery
;( function($) {
$(document).ready(function() {
$('.vs-slider .item').each( function() {
$(this).css('z-index', $('.vs-slider .item').length - $('.vs-slider .item').index(this));
});
$('.vss-nav').on('click', '.prev, .next', function() {
var active = $(this).closest('.vs-slider').find('.item.active');
if ( $(this).hasClass('next') ) {
vss_moveleft($('.vs-slider'));
active.next().addClass('active');
} else {
vss_moveleft( $('.vs-slider'), 'right');
active.prev().addClass('active');
}
active.removeClass('active');
});
function vss_moveleft( slider, type = 'left' ) {
var itemWidth = slider.find('.item').outerWidth() - 299,
itemTotal = slider.find('.item').length,
currentOff = slider.find('.vss-wrap').position().left,
movemVal = type === 'left' ? currentOff - itemWidth : currentOff + itemWidth;
slider.find('.vss-wrap').css('transform', 'translate3d('+ movemVal +'px, 0px, 0px)');
}
});
})(jQuery);
CSS
body {
background: #222
}
.vs-slider {
position: relative;
overflow: hidden;
max-height: 290px;
max-width: 500px;
}
.vs-slider img {
margin: 0;
vertical-align: top;
}
.vs-slider .vss-wrap {
min-width: 90VW;
transform: translate3d(0px, 0px, 0px);
transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
clear: both;
width: 100%;
display: block;
content: "";
}
.vs-slider .item {
float: left;
border: 1px solid #fff;
transform: scale(.7);
position: relative;
z-index: 1;
transition: all 1s ease 0s;
margin-right: -299px;
}
.vs-slider .item.active {
transform: scale(1);
z-index: 20 !important;
}
.vs-slider .item:not(.active) {
z-index: 0;
cursor: pointer;
}
.vss-nav {
position: absolute;
margin: 0;
padding: 0;
right: 5px;
bottom: 0;
}
.vss-nav li {
display: inline-block;
color: #fff;
margin: 0 5px;
cursor: pointer;
}
Would appreciate any help.
Thanks
解决方案
Hey what a interesting question you did, you need to care about some things to achieve your goal, so I will explain what you missing.
- You can use pure css to apply the transition with out JS, so the things you need are Siblings Selectors, this will help you to apply styles to all elements in the right side of the specific element.
For Example: imagine we have a simple markup like
<div>
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
// Styles.css
.item.active ~ .item {
background: blue;
}
The style above will be apply to the all elements with the item class just in the right side of the .item.active element
Apply styles for all
itemclass to be applied to thrown them to the left side.Apply style for
.item.activeelement to be the only to be shown.To make your slider infinitive, you need to check when user click next and prev arrow, and verify when the user will reach the end at the next or at the prev elements, then you need to take the first element and put it at the end, for the next case, and take the last element and put it at the beginning in prev case.
You need to check if when the slider start, if the first element is active, then you need to clone all elements and put them in the reverse order just before to the first element.
So, no more words, here you need the working example, that will help you a lot to understand this feature for your infinitive slider.
;( function($) {
$(document).ready(function() {
/*
This function will check if the active class is in the first element then we will clone all elements at the left side of the first element to make it circular sliding
*/
function cloneElementsIfStartAtZero() {
var firstItem = $('.item').first();
var isActiveFirst = firstItem.hasClass('active');
if (isActiveFirst) {
var last = firstItem;
$($('.item').get().reverse()).each(function(){
var current = $(this).clone().removeClass('active');
last.before(current);
last = current;
});
}
}
cloneElementsIfStartAtZero();
$('.vss-nav').on('click', '.prev, .next', function() {
// we get the active, first, and last elements
var active = $('.item.active');
var first = $('.item').first();
var last = $('.item').last();
// if click at next arrow
if ( $(this).hasClass('next') ) {
// check if next element is the last, then take the first element and set it to the last element
if(active.next().next().length === 0) {
last.after(first);
}
// apply active class to make transition
active.next().addClass('active');
} else {
// check if prev element is the first, then take last element and set it before the first element
if(active.prev().length === 0 || active.prev().prev().length === 0) {
first.before(last);
}
// then appy active class to apply transition
active.prev().addClass('active');
}
active.removeClass('active');
});
function vss_moveleft( slider, type = 'left' ) {
var itemWidth = slider.find('.item').outerWidth() - 299,
itemTotal = slider.find('.item').length,
currentOff = slider.find('.vss-wrap').position().left,
movemVal = type === 'left' ? currentOff - itemWidth : currentOff + itemWidth;
slider.find('.vss-wrap').css('transform', 'translate3d('+ movemVal +'px, 0px, 0px)');
}
});
})(jQuery);
body {
background: #222
}
.vs-slider {
position: relative;
/* overflow: hidden;*/
max-height: 290px;
max-width: 500px;
margin: auto;
}
.vs-slider img {
margin: 0;
vertical-align: top;
}
.vs-slider .vss-wrap {
min-width: 90VW;
transform: translate3d(0px, 0px, 0px);
transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
clear: both;
width: 100%;
display: block;
content: "";
}
/* THIS WILL MAKE THE TRANSITION OVER CSS */
/*
This will throw all .item to the left at 50% relative to the container .vss-wrap
*/
.vs-slider .item {
transform: translate3d(-50%, 0, 0) scale(.7);
z-index: 1;
position: absolute;
opacity: .2;
transition: all 1s;
top: 0;
z-index: 1;
}
/*
This will show and apply the transition only to the .active element
*/
.vs-slider .item.active {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
z-index: 2;
position: relative;
}
/*
This will throw all elements set to the right of the .active element to 50% to the right and apply css styles
*/
.vs-slider .item.active ~ .item {
transform: translate3d(50%, 0, 0) scale(.7);
}
/* THIS WILL MAKE THE TRANSITION OVER CSS */
.vss-nav {
position: absolute;
margin: 0;
padding: 0;
right: 5px;
bottom: 0;
}
.vss-nav li {
display: inline-block;
color: #fff;
margin: 0 5px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vs-slider">
<div class="vss-wrap">
<div class="item active"><img src="https://i.guim.co.uk/img/media/59dee3fae368b6625fcd588cdc0c759f6aacd117/0_0_6100_3660/500.jpg?quality=85&auto=format&fit=max&s=998f324a337c7c17be1d754e3b856201" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="https://www.chileholidayarchitects.com/wp-content/uploads/2018/11/Chile-General-007-500x300.jpg" alt="Slider Item" width="430" height="280"></div>
<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDYTOz0c9d1h4Xj4HULfGeZVrQMw3zzA77vEPuX-RMY6ah8GkY" alt="Slider Item" width="430" height="280"></div>
</div>
<ul class="vss-nav">
<li class="prev"><</li>
<li class="next">></li>
</ul>
</div>
这篇关于jQuery/javascript循环滑块项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
