动态时,光滑的滑块仅显示一个点

时间:2019-05-16 22:57:48

标签: jquery css laravel-5 plugins

这是我在该网站上遇到的第一个问题,对于英语(不是我的第一语言),我事先表示歉意。

我的问题:我正在Laravel55中使用Slick滑块插件。这个插件可以完美地与静态声明一起使用,但是当我尝试动态地使用静态声明时(使用通过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

抱歉,我可能已跳过的任何信息 任何帮助或评论将不胜感激

2 个答案:

答案 0 :(得分:0)

你好,我刚刚看到了你给的参考和我的结论:-

  1. 我认为您的动态观点是正确的。
  2. 在动态推荐中添加3个以上的数据,您将看到相同的行为。
  3. 还发送$testimonial数据以进一步说明。

答案 1 :(得分:0)

这是因为您已经设置了slidesToShow:3并且只有三个推荐书,所以当您拥有三个以上的推荐书时,光滑的滑块会添加滑动条。如果您设置了slidesToShow=2,那么您将看到带有点和箭头以及2个推荐词的滑块。

希望您会得到答案。