保持图像的3D立方体在同一侧继续过渡

我已使用本教程创建了一个以幻灯片形式移动的图像立方体。 https://webdevtrick.com/css-3d-cube-carousel/?unapproved=16788&moderation-hash=ec78aa2bd99b49552d07f0ec60049b18#comment-16788

查看正在做什么https://files.fm/u/s2ywz7my

我已经设法使用setInterval将其自动移动。当多维数据集到达第四张图像时。它移回了第一个。

jQuery文件

     <script>
        /** Code By Webdevtrick ( https://webdevtrick.com ) **/
        var $carousel = $('.carousel'),currentSlide,nextSlide;
        setInterval( function () 
        {
            currentSlide = $carousel.attr('data-slide');
            nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1;
            $carousel.attr('data-slide',nextSlide);
        },2000);
    </script>

我希望立方体继续向左滑动，并且也要绕其自身移动。

通过添加一些CSS并在JS中进行修改，您可以循环播放此多维数据集滑块。但这是通过更改data-slide的值并应用CSS旋转立方体来进行动画处理的。它不是动态滑块。

此处正在演示

$(document).ready(function() {
  
  var $carousel = $('.carousel'),currentSlide,nextSlide;

  $('.next').click(function() {
    if(!$carousel.hasClass('sliding')){
      currentSlide = $carousel.attr('data-slide');
      nextSlide = +currentSlide === 5 ? 0 : +currentSlide + 1;
      $carousel.attr('data-slide',nextSlide);
      $carousel.addClass('sliding');
    }
    $carousel.on('transitionend',function(){
      if(nextSlide == 5){
        $carousel.css('transition','none');
        $carousel.attr('data-slide',1);
        setTimeout(function(){
          $carousel.removeAttr('style');
        },10);
      }
      $carousel.removeClass('sliding');
    });
  });

  $('.prev').click(function() {
    if(!$carousel.hasClass('sliding')){
      currentSlide = $carousel.attr('data-slide');
      nextSlide = +currentSlide === 0 ? 5 : +currentSlide - 1;
      $carousel.attr('data-slide',function(){
      if(nextSlide == 0){
        $carousel.css('transition',4);
        setTimeout(function(){
          $carousel.removeAttr('style');
        },10);
      }
      $carousel.removeClass('sliding');
    });
  });
});

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
*,*:before,*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,body {
  width: 100%;
  height: 100%;
}
body {
  margin-top: 200px;
  background: #333;
  font-family: 'Staatliches',cursive;
  font-size: 2em;
  line-height: 1.5;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 5em;
  perspective: 100em;
}
.carousel {
  position: relative;
  width: 15em;
  height: 15em;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.carousel[data-slide="0"] {
  transform: rotateY(90deg);
}
.carousel[data-slide="1"] {
  transform: rotateY(0deg);
}
.carousel[data-slide="2"] {
  transform: rotateY(-90deg);
}
.carousel[data-slide="3"] {
  transform: rotateY(-180deg);
}
.carousel[data-slide="4"] {
  transform: rotateY(-270deg);
}
.carousel[data-slide="5"] {
  transform: rotateY(-360deg);
}

.slides {
  position: absolute;
  width: 15em;
  height: 15em;
  background: white;
}
.slides img {
  width: 100%;
}
.back,.slides:nth-child(3) {
  transform: translateZ(-7.5em) rotateY(180deg);
}
.right,.slides:nth-child(2) {
  transform: rotateY(-270deg) translateX(7.5em);
  transform-origin: top right;
}
.left,.slides:nth-child(4) {
  transform: rotateY(270deg) translateX(-7.5em);
  transform-origin: center left;
}
.front,.slides:nth-child(1) {
  transform: translateZ(7.5em);
}
.next,.prev {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6em;
  margin-top: -2.5em;
  border-radius: 3px;
  background: #212121;
  text-align: center;
  line-height: 3;
  letter-spacing: 5px;
  color: white;
  transform: translateY(-50%);
  cursor: pointer;
}
.prev:hover {
  background:  #e60023;
}
.prev {
  left: 0;
}
.next:hover {
  background:  #e60023;
}
.cf:before,.slides:before,.cf:after,.slides:after {
  content: " ";
  display: table;
}
.cf:after,.slides:after {
  clear: both;
}
.cf,.slides {
  *zoom: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="carousel" data-slide="1">
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=1" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=2" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=3" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=4" />
    </div>
  </div>
  <div class="next">NEXT &#8680;</div>
  <div class="prev">&#8678; PREV</div>
</div>

您可以在next功能中触发setInterval按钮来自动滑动立方体。通过添加。

setInterval( function () {
   $('.next').trigger('click');
},2000);

保持图像的3D立方体在同一侧继续过渡

nongdada123456 回答：保持图像的3D立方体在同一侧继续过渡

大家都在问