为啥 bootstrap 4 滑块工作不顺畅？

Posted 2023-03-06

【中文标题】为啥 bootstrap 4 滑块工作不顺畅？

【英文标题】：Why bootstrap 4 slider is not working smoothly?为什么 bootstrap 4 滑块工作不顺畅？

【发布时间】：2020-09-28 17:54:44

【问题描述】：

我已经自定义了正在工作的 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"  class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="https://i.stack.imgur.com/QzFbS.png"  class="d-block w-100">
      </div>
    </div>
    <div class="carousel-item">
      <div class="item__third">
        <img src="https://i.stack.imgur.com/8R8r3.png"  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>

我们将不胜感激，谢谢！

【问题讨论】：

对我来说，它在最新的稳定版本 FF、Chrome 和 Opera（都在 PC 上）中可以流畅地滑动，除了 z-index 和缩放有点弹出。您看到的是什么，您希望看到什么，哪些浏览器不适合您？

@indextwo 当您单击下一个和上一个按钮时，这无法正常工作，突然出现图像缩放，如果您看到正确，那么您可以找到它。为什么突然文字变大应该是平滑的。就像我们一次有三个滑块一样，中心（活动）滑块比左侧和右侧滑块大，当您单击下一步并预览时，它应该是平滑的。

你关心平滑度，你检查过prefers-reduced-motionCSS吗？以防万一。

实际上我尝试了过渡，但这也不起作用，你有没有看到 Gaana App 滑块我想要改变歌曲时的平滑度。

@RohitVerma 我认为您不想使用 Bootstrap Carousel。最好使用自己制作的轮播，因为您的要求与 Boostrap Carousel 所能提供的完全不同。

【参考方案1】：

兄弟，我认为您的滑块工作正常，而且也很流畅。由于transform 属性，您会感觉它不平滑，因为幻灯片会快速更改其大小，并且当时它们没有动作...如果您想让幻灯片感觉更流畅，请尝试添加幻灯片切换动画...

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

Gaana 滑块

/* 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 轻松定义他们的动画！！！

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

【讨论】：

如果您认为这是您想要的滑块，那么请接受我的回答

如何在此处添加指标，例如在 bootstrap 4 carousel 中？并且还想在全宽屏幕上使用这个滑块，请解决这个问题然后我会接受这个答案。

@Rohit_Verma 我认为经过如此多的编辑，您现在想要的输出已经实现了......但我很遗憾地说我无法为底部的三个按钮定义 javascript，因为我不是那个擅长JavaScript...我仍然会尽力在明天之前实现这一目标，但是在此之前您能否接受我的回答，因为您的轮播快完成了...我将非常感激...提前致谢！