javascript - 为什么 bootstrap 4 滑块工作不顺畅?
问题描述
我已经自定义了正在工作的 bootstrap4 滑块,但是当我单击时没有平滑度,next
并且prev
按钮突然变成了滑块而不是平滑。我该怎么做你有什么想法来解决这个问题吗?
下面给出的滑块:-
$('.carousel-item', '.multi-item-carousel').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function() {
var prev = $(this).prev();
if (!prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
.multi-item-carousel {
overflow: hidden;
}
.multi-item-carousel .carousel-indicators {
margin-right: 25%;
margin-left: 25%;
}
.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next {
/* background: rgba(255, 255, 255, 0.3); */
width: 25%;
z-index: 11;
/* .carousel-caption has z-index 10 */
}
.multi-item-carousel .carousel-inner {
width: 240%;
left: -70%;
}
.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.multi-item-carousel .item__third {
float: left;
position: relative;
width: 33.33333333%;
/* padding: 0px 10px; */
transition: all 1s;
transform: scale(1);
}
.multi-item-carousel .carousel-item .item__third:first-child img,
.multi-item-carousel .carousel-item .item__third:last-child img {
transform: scale(0.9);
transition: all 1s;
}
.multi-item-carousel .carousel-item .item__third:first-child img {
margin-left: 40px;
}
.multi-item-carousel .carousel-item .item__third:last-child img {
margin-left: -40px;
}
.multi-item-carousel .controls img {
width: 50px;
}
.multi-item-carousel .controls .carousel-control-prev,
.multi-item-carousel .controls .carousel-control-next {
opacity: 1 !important;
}
.multi-item-carousel .controls .carousel-control-prev img {
margin-left: -150px;
}
.multi-item-carousel .controls .carousel-control-next img {
margin-right: -150px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide multi-item-carousel mt-5" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://i.stack.imgur.com/q0Kk7.png" alt="" class="d-block w-100">
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://i.stack.imgur.com/QzFbS.png" alt="" class="d-block w-100">
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://i.stack.imgur.com/8R8r3.png" alt="" class="d-block w-100">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
将不胜感激,谢谢!
解决方案
兄弟,我认为你的滑块工作正常,也很流畅。您会因为该属性而感觉它不平滑transform
,因为幻灯片会快速更改其大小,并且当时它们中没有运动...如果您想让幻灯片感觉更流畅,请尝试为幻灯片添加动画改变...
但是兄弟,如果你想要像 Gaana App 的歌曲播放器这样的滑块,那么你可以复制下面的代码来获得这样的滑块......
加纳滑块
/* Create an array to hold the different image positions */
var itemPositions = [];
var numberOfItems = $('#scroller .item').length;
/* Assign each array element a CSS class based on its initial position */
function assignPositions() {
for (var i = 0; i < numberOfItems; i++) {
if (i === 0) {
itemPositions[i] = 'left-hidden';
} else if (i === 1) {
itemPositions[i] = 'left';
} else if (i === 2) {
itemPositions[i] = 'middle';
} else if (i === 3) {
itemPositions[i] = 'right';
} else {
itemPositions[i] = 'right-hidden';
}
}
/* Add each class to the corresponding element */
$('#scroller .item').each(function(index) {
$(this).addClass(itemPositions[index]);
});
}
/* To scroll, we shift the array values by one place and reapply the classes to the images */
function scroll(direction) {
if (direction === 'prev') {
itemPositions.push(itemPositions.shift());
} else if (direction === 'next') {
itemPositions.unshift(itemPositions.pop());
}
$('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
$(this).addClass(itemPositions[index]);
});
}
/* Do all this when the DOMs ready */
$(document).ready(function() {
assignPositions();
var autoScroll = window.setInterval("scroll('next')", 3000);
/* Hover behaviours */
$('#scroller').hover(function() {
window.clearInterval(autoScroll);
$('.nav').stop(true, true).fadeIn(200);
$('.dots').stop(true, true).fadeIn(200);
}, function() {
autoScroll = window.setInterval("scroll('next')", 3000);
$('.nav').stop(true, true).fadeOut(200);
$('.dots').stop(true, true).fadeOut(200);
});
/* Click behaviours */
$('.prev').click(function() {
scroll('prev');
});
$('.next').click(function() {
scroll('next');
});
});
html,
body {
height: 100%;
margin: 0;
}
body {
background: #fff;
}
.warning {
margin: 0.5vw auto 0;
width: 70vw;
text-align: center;
font-size: 20px;
}
#scroller {
width: 70vw;
height: 20vw;
margin: 0 auto;
padding: 3vw 0;
}
#scroller .item {
width: 70vw;
height: 20vw;
display: block;
position: absolute;
border-radius: 1vw; color-stop(.75, transparent), to(rgba(255, 255, 255, 0.15)));
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
z-index: 0;
}
.dots {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 170px;
z-index: 2;
display: none;
top: 20vw;
}
.dot1,
.dot2,
.dot3 {
width: 50px;
height: 5px;
background-color: rgba(255, 255, 255, 0.6);
display: block;
position: absolute;
cursor: pointer;
}
.dot1 {
left: 0px;
}
.dot2 {
left: 60px;
}
.dot3 {
left: 120px;
}
.dot1:hover,
.dot2:hover,
.dot3:hover {
background-color: rgba(255, 255, 255, 1);
}
#scroller .item img {
display: block;
border-radius: 1vw;
width: 70vw;
height: 20vw;
}
#scroller .left {
transform: translateX(-40vw) scale(0.4, 0.6);
-webkit-transform: translateX(-40vw) scale(0.4, 0.6);
-moz-transform: translateX(-40vw) scale(0.4, 0.6);
-o-transform: translateX(-40vw) scale(0.4, 0.6);
}
#scroller .middle {
z-index: 1;
transform: rotateY(0deg) translateX(0) scale(1);
-webkit-transform: rotateY(0deg) translateX(0) scale(1);
-moz-transform: rotateY(0deg) translateX(0) scale(1);
-o-transform: rotateY(0deg) translateX(0) scale(1);
}
#scroller .right {
transform: translateX(40vw) scale(0.4, 0.6);
-webkit-transform: translateX(40vw) scale(0.4, 0.6);
-moz-transform: translateX(40vw) scale(0.4, 0.6);
-o-transform: translateX(40vw) scale(0.4, 0.6);
}
#scroller .left-hidden {
opacity: 0;
z-index: -1;
transform: translateX(-430px) scale(0.3, 0.5);
-webkit-transform: translateX(-430px) scale(0.3, 0.5);
-moz-transform: translateX(-430px) scale(0.3, 0.5);
-o-transform: translateX(-430px) scale(0.3, 0.5);
}
#scroller .right-hidden {
opacity: 0;
z-index: -1;
transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
-webkit-transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
-moz-transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
-o-transform: translateX(430px) skewY(5deg) scale(0.3, 0.5);
}
.nav {
position: absolute;
width: 70vw;
height: 0;
z-index: 2;
display: none;
top: 11.5vw;
}
.prev,
.next {
position: absolute;
display: block;
height: 20px;
width: 20px;
background-color: rgba(255, 255, 255, 0);
text-align: center;
line-height: 26px;
cursor: pointer;
}
.prev {
transform: rotate(-45deg);
left: 2vw;
border-top: 5px solid rgba(255, 255, 255, 0.9);
border-left: 5px solid rgba(255, 255, 255, 0.9);
}
.next {
transform: rotate(45deg);
border-top: 5px solid rgba(255, 255, 255, 0.9);
border-right: 5px solid rgba(255, 255, 255, 0.9);
right: 2vw;
}
.prev:hover {
border-top: 5px solid rgba(255, 255, 255, 1);
border-left: 5px solid rgba(255, 255, 255, 1);
}
.next:hover {
border-top: 5px solid rgba(255, 255, 255, 1);
border-right: 5px solid rgba(255, 255, 255, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller">
<div class="nav">
<a class="prev"></a>
<a class="next"></a>
</div>
<a class="item" href="#">
<img src="https://i.stack.imgur.com/q0Kk7.png" />
</a>
<a class="item" href="#">
<img src="https://i.stack.imgur.com/QzFbS.png" />
</a>
<a class="item" href="#">
<img src="https://i.stack.imgur.com/8R8r3.png" />
</a>
<a class="item" href="#">
<img src="https://i.stack.imgur.com/q0Kk7.png" />
</a>
<a class="item" href="#">
<img src="https://i.stack.imgur.com/QzFbS.png" />
</a>
<a class="item" href="#">
<img src="https://i.stack.imgur.com/8R8r3.png" />
</a>
<div class="dots">
<a class="dot1"></a>
<a class="dot2"></a>
<a class="dot3"></a>
</div>
</div>
您可以通过为它们提供项目类别来添加任意数量的幻灯片!并确保您根据需要仅通过一点 CSS 更改其尺寸...
如果您希望另一侧幻灯片的样式必须不同,例如它们必须很大或有点倾斜或旋转,然后在 [left-hidden, left, middle, right, right-hidden] 的 CSS 部分中指定所有这些...您也可以通过该部分中的一些 CSS 轻松定义他们的动画!!!
如果您需要上述代码的任何类型的帮助或解释,请在评论中告诉我...
谢谢,
Om Chaudhary
推荐阅读
- python - 两组重叠多边形的快速映射
- regex - 为什么这个正则表达式在 Python 中不匹配?
- python-3.x - 如何检查 Keras 后端功能是否正常工作?
- javascript - 如何覆盖 JavaScript 方法?
- reactjs - 无法通过 redux 获取 Firestore 数据
- java - 带有 ANSI Escape 序列和光标移动的 Java 扫描器在将光标移开和移回扫描器时显示 ^R
- c++ - 如何让代码读取不同的文件?
- javascript - 中断并重新启动 setTimeouts 循环
- python-3.x - 无法弄清楚条件
- python - 如果列表中的某个项目在python中有某个字符串,我该如何提取它?