Javascript 使旋转木马无限或重复

我还是个新手，还在学习javascript/jquery。我这里有一个用于我的旋转木马的代码，我需要使它成为一个无限或重复的旋转木马，这意味着在最后一个旋转木马之后，它将返回到1号旋转木马

下面是我的html和javascript代码

以下是我的html代码：

<div class="featured-prods">
                <h6 class="container products-feature">Featured Products</h6>
            </div>
            <div class="container">
                <div class="row">
                    <div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel"  data-interval="2000">
                        <div class="MultiCarousel-inner">
                            <?php
                                $featured = mysqli_query($mysqli, "SELECT * FROM featured_product");
                                while($feat = mysqli_fetch_array($featured)) {
                                    echo "<div class='item'>";
                                        echo "<div class='feature-container'>";
                                            echo "<div class='feature-text'>";
                                                echo $feat['title'];
                                            echo "</div>";
                                            echo "<img class='img-fluid' src=".$feat['image_url'].">";
                                            echo "<div class='feature-overlay'>";
                                                echo "<div class='feature-description'>".$feat['description']."</div>";
                                            echo "</div>";
                                        echo "</div>";
                                    echo "</div>";
                                }
                            ?>
                        </div>
                        <button class="btn btn-primary leftLst"><</button>
                        <button class="btn btn-primary rightLst">></button>
                    </div>
                </div>
            </div>

这是我的javascript代码：

$(document).ready(function () {
            var itemsMainDiv = ('.MultiCarousel');
            var itemsDiv = ('.MultiCarousel-inner');
            var itemWidth = "";


            $('.leftLst, .rightLst').click(function () {
                var condition = $(this).hasClass("leftLst");
                if (condition)
                    click(0, this);
                else
                    click(1, this)
            });
            ResCarouselSize();
            $(window).resize(function () {
                ResCarouselSize();
            });
            //this function define the size of the items
            function ResCarouselSize() {
                var incno = 0;
                var dataItems = ("data-items");
                var itemClass = ('.item');
                var id = 0;
                var btnParentSb = '';
                var itemsSplit = '';
                var sampwidth = $(itemsMainDiv).width();
                var bodyWidth = $('body').width();
                $(itemsDiv).each(function () {
                    id = id + 1;
                    var itemNumbers = $(this).find(itemClass).length;
                    btnParentSb = $(this).parent().attr(dataItems);
                    itemsSplit = btnParentSb.split(',');
                    $(this).parent().attr("id", "MultiCarousel" + id);
                    if (bodyWidth >= 1200) {
                        incno = itemsSplit[3];
                        itemWidth = sampwidth / incno;
                    }
                    else if (bodyWidth >= 992) {
                        incno = itemsSplit[2];
                        itemWidth = sampwidth / incno;
                    }
                    else if (bodyWidth >= 768) {
                        incno = itemsSplit[1];
                        itemWidth = sampwidth / incno;
                    }
                    else {
                        incno = itemsSplit[0];
                        itemWidth = sampwidth / incno;
                    }
                    $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
                    $(this).find(itemClass).each(function () {
                        $(this).outerWidth(itemWidth);
                    });
                    $(".leftLst").addClass("over");
                    $(".rightLst").removeClass("over");
                });
            }
            //this function used to move the items
            function ResCarousel(e, el, s) {
                var leftBtn = ('.leftLst');
                var rightBtn = ('.rightLst');
                var translateXval = '';
                var divStyle = $(el + ' ' + itemsDiv).css('transform');
                var values = divStyle.match(/-?[\d\.]+/g);
                var xds = Math.abs(values[4]);
                if (e == 0) {
                    translateXval = parseInt(xds) - parseInt(itemWidth * s);
                    $(el + ' ' + rightBtn).removeClass("over");

                    if (translateXval <= itemWidth / 2) {
                        translateXval = 0;
                        $(el + ' ' + leftBtn).addClass("over");
                    }
                }
                else if (e == 1) {
                    var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
                    translateXval = parseInt(xds) + parseInt(itemWidth * s);
                    $(el + ' ' + leftBtn).removeClass("over");

                    if (translateXval >= itemsCondition - itemWidth / 2) {
                        translateXval = itemsCondition;
                        $(el + ' ' + rightBtn).addClass("over");
                    }
                }
                $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
            }
            //It is used to get some elements from btn
            function click(ell, ee) {
                var Parent = "#" + $(ee).parent().attr("id");
                var slide = $(Parent).attr("data-slide");
                ResCarousel(ell, Parent, slide);
            }
        });

---

你不必这么做。它已经在引导中完成了。你可以向这位官员咨询。不需要编写额外的JavaScript代码，除非您想更改默认代码中的某些内容。根据您的需求，您不需要添加一行JavaScript代码

这是一个样本

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

---

编辑：由于您正在进行多转盘，因此需要在转盘上为单个页面上的可选控件设置唯一id。您可以阅读更多关于我以前使用slick执行此操作的信息：检查自动播放并开始。谢谢@mrdeadsven，但我只想编辑此代码。我不想添加新代码。我没有通读您的代码，但在我自己的代码中，我只使用var next=$current\u slide.next；如果next.length<1{next=$slides.first；}使其重复/无限我将把它放在哪里？里面在哪里@GGDX请阅读-总结是，这不是一个理想的方式来解决志愿者，可能会适得其反获得答案。请不要将此添加到您的问题中。但是我正在做的是一个多转盘而不是一个转盘。您所说的多转盘是什么意思？就像在一行中，它显示6个项目，而不是一个哦，好的。你能试着编辑你的答案并告诉我你是如何要求制作一个多旋转木马还是让画廊无限循环的吗？