循环HTML旋转木马

Question

我的网站上有下面的旋转木马。我在想，当它到达最后/第一张图片时，是否有办法使它循环。我试着克隆旋转木马，但它开始改变旋转木马，没有保持旋转木马的正面和中心。它也开始隐藏幻灯片。有没有一种不用彻底检修就能循环起来的方法？我对javascript不太熟悉。

<div class="slider">
        <input type="radio" name="testimonial" id="t-1">
        <input type="radio" name="testimonial" id="t-2">
        <input type="radio" name="testimonial" id="t-3" checked>
        <input type="radio" name="testimonial" id="t-4">
        <input type="radio" name="testimonial" id="t-5">
        <div class="testimonials">
            <label class="item" for="t-1">
                <img src="https://dummyimage.com/150" alt="picture">
                <p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
                <h2>- Princy, Web Developer</h2>
            </label>
            <label class="item" for="t-2">
                <img src="https://dummyimage.com/150" alt="picture">
                <p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
                <h2>- Princy, Web Developer</h2>
            </label>
            <label class="item" for="t-3">
                <img src="https://dummyimage.com/150" alt="picture">
                <p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
                <h2>- Princy, Web Developer</h2>
            </label>
            <label class="item" for="t-4">
                <img src="https://dummyimage.com/150" alt="picture">
                <p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
                <h2>- Princy, Web Developer</h2>
            </label>
            <label class="item" for="t-5">
                <img src="https://dummyimage.com/150" alt="picture">
                <p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
                <h2>- Princy, Web Developer</h2>
            </label>
        </div>
  <a class="t-prev" onclick="Navi('prev');">&#10094;</a>
  <a class="t-next" onclick="Navi('next');">&#10095;</a>
        <div class="dots">
            <label for="t-1"></label>
            <label for="t-2"></label>
            <label for="t-3"></label>
            <label for="t-4"></label>
            <label for="t-5"></label>
        </div>
    </div>

CSS

body {
    margin: 0;
    background-image: linear-gradient(90deg, #201A35, #0B0320);
    color: #fff;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.slider {
    width: 100%;
}
.slider input {
    display: none;
}
.testimonials {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 350px;
    perspective: 1000px;
    overflow: hidden;
}
.testimonials .item {
    top: 0;
    position: absolute;
    box-sizing: border-box;
    background-color: #0A0220;
    padding: 30px;
    width: 450px;
    text-align: center;
    transition: transform 0.4s;
    -webkit-transform-style: preserve-3d;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    user-select: none;
    cursor: pointer;
}
.testimonials .item img {
    width: 100px;
    border-radius: 50%;
    border: 13px solid #3B344D;
}
.testimonials .item p {
    color: #ddd;
}
.testimonials .item h2 {
    font-size: 14px;
}
.dots {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dots label {
    display: block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    cursor: pointer;
    background-color: #413B52;
    margin: 7px;
    transition: transform 0.2s, color 0.2s;
}

/* First */
#t-1:checked ~ .dots label[for="t-1"] {
    transform: scale(2);
    background-color: #fff;
}
#t-1:checked ~ .dots label[for="t-2"] {
    transform: scale(1.5);
}
#t-1:checked ~ .testimonials label[for="t-1"] {
    z-index: 4;
}
#t-1:checked ~ .testimonials label[for="t-2"] {
    transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
    z-index: 3;
}
#t-1:checked ~ .testimonials label[for="t-3"] {
    transform: translateX(600px) translateZ(-180px) rotateY(-25deg);
    z-index: 2;
}
#t-1:checked ~ .testimonials label[for="t-4"] {
    transform: translateX(900px) translateZ(-270px) rotateY(-35deg);
    z-index: 1;
}
#t-1:checked ~ .testimonials label[for="t-5"] {
    transform: translateX(1200px) translateZ(-360px) rotateY(-45deg);
}

/* Second */
#t-2:checked ~ .dots label[for="t-1"] {
    transform: scale(1.5);
}
#t-2:checked ~ .dots label[for="t-2"] {
    transform: scale(2);
    background-color: #fff;
}
#t-2:checked ~ .dots label[for="t-3"] {
    transform: scale(1.5);
}
#t-2:checked ~ .testimonials label[for="t-1"] {
    transform: translateX(-300px) translateZ(-90px) rotateY(15deg);
}
#t-2:checked ~ .testimonials label[for="t-2"] {
    z-index: 3;
}
#t-2:checked ~ .testimonials label[for="t-3"] {
    transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
    z-index: 2;
}
#t-2:checked ~ .testimonials label[for="t-4"] {
    transform: translateX(600px) translateZ(-180px) rotateY(-25deg);
    z-index: 1;
}
#t-2:checked ~ .testimonials label[for="t-5"] {
    transform: translateX(900px) translateZ(-270px) rotateY(-35deg);
}

/* Third */
#t-3:checked ~ .dots label[for="t-2"] {
    transform: scale(1.5);
}
#t-3:checked ~ .dots label[for="t-3"] {
    transform: scale(2);
    background-color: #fff;
}
#t-3:checked ~ .dots label[for="t-4"] {
    transform: scale(1.5);
}
#t-3:checked ~ .testimonials label[for="t-1"] {
    transform: translateX(-600px) translateZ(-180px) rotateY(25deg);
}
#t-3:checked ~ .testimonials label[for="t-2"] {
    transform: translateX(-300px) translateZ(-90px) rotateY(15deg);
}
#t-3:checked ~ .testimonials label[for="t-3"] {
    z-index: 3;
}
#t-3:checked ~ .testimonials label[for="t-4"] {
    transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
    z-index: 2;
}
#t-3:checked ~ .testimonials label[for="t-5"] {
    transform: translateX(600px) translateZ(-180px) rotateY(-25deg);
}

/* Fourth */
#t-4:checked ~ .dots label[for="t-3"] {
    transform: scale(1.5);
}
#t-4:checked ~ .dots label[for="t-4"] {
    transform: scale(2);
    background-color: #fff;
}
#t-4:checked ~ .dots label[for="t-5"] {
    transform: scale(1.5);
}
#t-4:checked ~ .testimonials label[for="t-1"] {
    transform: translateX(-900px) translateZ(-270px) rotateY(35deg);
}
#t-4:checked ~ .testimonials label[for="t-2"] {
    transform: translateX(-600px) translateZ(-180px) rotateY(25deg);
}
#t-4:checked ~ .testimonials label[for="t-3"] {
    transform: translateX(-300px) translateZ(-90px) rotateY(15deg);
    z-index: 2;
}
#t-4:checked ~ .testimonials label[for="t-4"] {
    z-index: 3;
}
#t-4:checked ~ .testimonials label[for="t-5"] {
    transform: translateX(300px) translateZ(-90px) rotateY(-15deg);
}

/* Fifth */
#t-5:checked ~ .dots label[for="t-4"] {
    transform: scale(1.5);
}
#t-5:checked ~ .dots label[for="t-5"] {
    transform: scale(2);
    background-color: #fff;
}
#t-5:checked ~ .testimonials label[for="t-1"] {
    transform: translateX(-1200px) translateZ(-360px) rotateY(45deg);
}
#t-5:checked ~ .testimonials label[for="t-2"] {
    transform: translateX(-900px) translateZ(-270px) rotateY(35deg);
    z-index: 1;
}
#t-5:checked ~ .testimonials label[for="t-3"] {
    transform: translateX(-600px) translateZ(-180px) rotateY(25deg);
    z-index: 2;
}
#t-5:checked ~ .testimonials label[for="t-4"] {
    transform: translateX(-300px) translateZ(-90px) rotateY(15deg);
    z-index: 3;
}
#t-5:checked ~ .testimonials label[for="t-5"] {
    z-index: 4;
}

/* Next & previous buttons */
.t-prev,
.t-next {
  cursor: pointer;
  position: absolute;
  top: 25%;
  width: auto;
  padding: 20px;
  margin-top: 0px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 0px 0px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.t-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.t-prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.t-prev:hover,
.t-next:hover {
  color: #fec900;
}

JS

$(document).ready(function () {
  $("input[name$='testimonial']").click(function () {
    var test = $(this).val();

    $("div.desc").hide();
    $("#next" + test).show();
  });
});

var index = 0;
Navi = function (direction) {
  var curr = $('input[name="testimonial"]:checked');

  if (direction == "next") {
    console.log(curr.next().val());

    curr.next().attr("checked", "checked");
    curr.next().click();
  } else {
    curr.prev().attr("checked", "checked");
    curr.prev().click();
  }
};

更新/正确编码

对于任何偶然发现这篇文章的人，我提供的是为我工作的更新代码https://codepen.io/no_name03/pen/WNJvVRY。

Answer 1

查看next是否返回一个元素，如果它没有返回，则选择第一个

if (direction == "next") {
  let nextElem = curr.next();
   if(!nextElem.length) {
     nextElem = $('input[name="testimonial"]').eq(0);
   }
   nextElem.attr("checked", "checked");
   nextElem.click();
}

为prev做同样的事情，但是选择最后一个。