这是我在该网站上遇到的第一个问题,对于英语(不是我的第一语言),我事先表示歉意。
我的问题:我正在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
抱歉,我可能已跳过的任何信息 任何帮助或评论将不胜感激
答案 0 :(得分:0)
你好,我刚刚看到了你给的参考和我的结论:-
$testimonial
数据以进一步说明。 答案 1 :(得分:0)
这是因为您已经设置了slidesToShow:3
并且只有三个推荐书,所以当您拥有三个以上的推荐书时,光滑的滑块会添加滑动条。如果您设置了slidesToShow=2
,那么您将看到带有点和箭头以及2个推荐词的滑块。
希望您会得到答案。