javascript - 为什么 bootstrap 4 slider 工作不顺畅？

标签 javascript html jquery css bootstrap-4

我已经自定义了正在工作的 bootstrap4 slider ，但是当我单击 next 时没有平滑度和 prev突然滑动而不是平滑的按钮。我该怎么做你有什么想法来解决这个问题吗？

下面给出的 slider :-

$('.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="/image/q0Kk7.png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="/image/QzFbS.png" alt="" class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="/image/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>


将不胜感激，谢谢!

最佳答案

兄弟，我认为你的 slider 工作正常，也很流畅。您会因为 transform 感到不顺畅属性，因为幻灯片快速改变它的大小，当时，它们没有运动......如果你想让幻灯片感觉更流畅，那么尝试添加幻灯片变化的动画......

但是兄弟，如果你想要像 Gaana App 的歌曲播放器这样的 slider ，那么你可以复制下面的代码来获得这样的 slider ......

Gaana slider 

/* 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="/image/q0Kk7.png" />
  </a>
  <a class="item" href="#">
    <img src="/image/QzFbS.png" />
  </a>
  <a class="item" href="#">
    <img src="/image/8R8r3.png" />
  </a>
  <a class="item" href="#">
    <img src="/image/q0Kk7.png" />
  </a>
  <a class="item" href="#">
    <img src="/image/QzFbS.png" />
  </a>
  <a class="item" href="#">
    <img src="/image/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 轻松定义他们的动画!!!

如果您需要上述代码的任何类型的帮助或解释，请在评论中告诉我...
谢谢，
奥姆·乔杜里

关于javascript - 为什么 bootstrap 4 slider 工作不顺畅？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62284564/

上一篇：javascript - 用两根手指垂直滚动

下一篇：javascript - 优化 Canvas 画圆

相关文章：

html - 如何在保留布局的同时向此 HTML 模板添加粘性页脚？

javascript - 在表格单元格的开头插入复选框

javascript - 如何使用正则表达式执行验证？

切换到全屏时 Javascript/jQuery 变慢

javascript - 如何从 Node 模块中加载用户特定的文件？

javascript - jBreadcrumbs 应用不正确

html - 影响 Angular 6+ 中所有组件和模态 <ng-template let-modal> 的主题服务

javascript - 在文本区域中添加多个图像、svg

javascript - Ext.EventManager 在 ExtJS 5 中被弃用

html - 将表格分成两列

©2024 IT工具网  联系我们