jquery - 光滑的 slider 在动态时仅显示一个点

Question

这是我在这个网站上的第一个问题，我提前为我的英语水平(不是我的母语)道歉

我的问题:我在 Laravel55 中使用 Slick slider 插件。这个插件与静态声明完美配合，但是当我尝试动态地执行它时(使用通过 foreach 循环显示的压缩变量)它与导航部分混淆，它只显示一个点并且两侧没有箭头。

查看此站点中的类似问题，我尝试比较静态和动态尝试之间的源代码，它生成相同的版本，但缩进略有不同。

我检查了字符集，验证了在 jQuery 之后加载插件 js，似乎没有任何错误。

动态

<section class="clients-feedback-area bg-white section_padding_100 clearfix" id="testimonials">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10">
                    <div class="slider slider-for">
                        <!-- Client Feedback Text  -->
                        @foreach($testimonials as $t)
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ {{$t->comment}} ”</p>
                            </div>
                            <div class="star-icon text-center">
                                @for($i=0;$i<$t->rate;$i++)
                                    <i class="ion-ios-star"></i>
                                @endfor
                            </div>
                            <div class="client-name text-center">
                                <h5>{{$t->name}}</h5>
                                <p>{{$t->department}}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <!-- Client Thumbnail Area -->
                <div class="col-12 col-md-6 col-lg-5">
                    <div class="slider slider-nav">
                    @foreach($testimonials as $tp)
                    <div class="client-thumbnail">
                        <img src="{{$tp->pAvatar}}">
                    </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
</section>

静态

<section class="clients-feedback-area bg-white section_padding_100 clearfix" id="testimonials">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10">
                    <div class="slider slider-for">
                        <!-- Client Feedback Text  -->
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ Muchas gracias por todo. Buenisima experiencia. ”</p>
                            </div>
                            <div class="star-icon text-center">
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                            </div>
                            <div class="client-name text-center">
                                <h5>Dra. Alice Boyle</h5>
                                <p></p>
                            </div>
                        </div>
                        <!-- Client Feedback Text  -->
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ Agradezco mucho la atención y excelente estadía. ”</p>
                            </div>
                            <div class="star-icon text-center">
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                            </div>
                            <div class="client-name text-center">
                                <h5>Carlos Navas</h5>
                                <p></p>
                            </div>
                        </div>
                        <!-- Client Feedback Text  -->
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ Fue una experiencia buenísima visitar aquí y una estadía excelente y comoda ¡Gracias!.”</p>
                            </div>
                            <div class="star-icon text-center">
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                            </div>
                            <div class="client-name text-center">
                                <h5>Liam Reucle</h5>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Client Thumbnail Area -->
                <div class="col-12 col-md-6 col-lg-5">
                    <div class="slider slider-nav">
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>                        
                    </div>
                </div>
            </div>
        </div>
</section>

为了更好地了解我的情况和我想要实现的目标，我将可视化如下(我无法插入图片，没有 10 点声誉)

动态行为: https://i.imgur.com/ktQ0Lsl.png

静态行为: https://i.imgur.com/CF7JKKD.png

对于我可能跳过的任何信息，我们深表歉意任何帮助或意见将不胜感激

Answer 1

您好，我刚刚看到您提供的引用资料和我的结论:-

1. 我认为你的动态观点是正确的。
2. 在动态推荐中添加超过 3 个数据，您将看到相同的行为。
3. 还发送$testimonial 数据以获得更多说明。