نحوه نمایش اطلاعات از دیتابیس به صورت حلقه ای

درود بر مهندسین گرامی بنده می خوام یک سری محصول داخل صفحه اصلی سایت نمایش بدم و چند تا محصوله. و با جاوا اسکریپ کاری کردم که هر چند ثانیه بره بعدی اما اتفاقی که میوفته اینه که همشو تو هم تو هم نمایش میده و محصول بعدی نمی ره خیلی وقته درگیر اینم و حتی کدشو عوضم کردم ولی بازم نشد.!!! اینم کد مربوطه:

    <div class="col-lg-9 col-md-9 col-xs-12 pl " style="margin-left: 10.5rem; ">
            <div class="content-widget-amazing pb-4 mt-2">
                <section id="amazing-slider" class="carousel slide carousel-fade card" data-ride="carousel">
                    <div class="row m-0">
                        <ol class="carousel-indicators pr-0">

                            <a class="carousel-control-prev" href="#amazing-slider" role="button" data-slide="prev">
                                <span class="fas fa-angle-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#amazing-slider" role="button" data-slide="next">
                                <span class="fas fa-angle-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </ol>

                        <!--عکس بزرگ اصلی-->
                        <div class="carousel-inner p-0 col-12">
                            <!-- تکرار شونده -->
                            @foreach($special_products as $special)
                            <div class="carousel-item active">
                                <div class="row m-0">
                                    <div class="right-col col-5 d-flex align-items-center">
                                        <a class="w-100 text-center img-link-amazing" href="#">
                                            <img src="{{$special->image}}" class="img-fluid"
                                                 alt="">
                                        </a>
                                    </div>
                                    <div class="col-7" style="font-family: 'Vazir', sans-serif;" >
                                        <div class="carousel-content">

                                            <h2 class="product-title">
                                                <a href="#">{{$special->title}}
                                                </a>
                                            </h2>
                                            <div class="price text-center">
                                                <del><span>{{number_format($special->FakePrice)}}<span>تومان</span></span></del>
                                                <ins><span>{{number_format($special->price)}}<span>تومان</span></span></ins>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                            <!-- تکرار شونده -->
                        </div>
                    </div>
                </section>
            </div>
        </div>