Can someone help me with slick slider "bug". So, I am working on the Laravel project and I have one image plus some information and CTA button/anchor.
All of the information are loading properly except the href attribute at the anchor element.
Currently, it goes like this:
FIRST SLIDE: it will load information of the first slide but href from the FOURTH
SECOND SLIDE: it will load information of the first slide but href from the FOURTH
THIRD SLIDE: it will load information of the first slide but href from the FOURTH
FOURTH SLIDE: it will load information of the first slide but href from the THIRD
Here is the HTML:
<div class="col-lg-6 left_column">
<h3>Informations</h3>
<div class="slick_slider">
@if (count($infos) > 0)
@foreach ($infos as $info)
<div>
<h2>{{ $info->title}}</h2>
<a href="{{ route('service.show', 'slug' => $info->slug) }}">{{ $info->slug }}</a>
</div>
@endforeach
@endif
</div>
</div>
Here is some HTML part for the image with id .slick_slider_nav
Here is the JS part:
// Services slider
$(".services_slider").slick({
// infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
cssEase: "linear",
asNavFor: ".slick_slider_nav",
prevArrow: "<img class='info_slick_arrow_left slick-prev' src='/images/arrow-left.svg'>",
nextArrow: "<img class='info_slick_arrow_right slick-next' src='/images/arrow-right.svg'>",
dots: false,
autoplay: true,
autoplaySpeed: 5000,
responsive: [{
breakpoint: 991,
settings: {
arrows: false,
},
}, ],
});
For this type of issue debugging is always the way to go to solve the issue quickly. It's unlikely the issue is related to Slick slider and more likely that it is either a database or a route issue. If you can show the method beneath service.show the community can also get a better picture of how the parameter is being utilised when you use the route helper.
Furthermore, if $infos is an Eloquent result / collection, you can utilise Laravel's helpers instead of count - eg: !$infos->isEmpty()
If this is a full URL you could just echo it without the route helper interpreting it (direct echo). If it's relative you need to include TRUE as the third parameter as per the help docs.
<div class="col-lg-6 left_column">
<h3>Informations</h3>
<div class="slick_slider">
@if (!$infos->isEmpty())
@foreach ($infos as $info)
@php
// Check slug's data
dump($info->slug);
// or just dump the whole object
dump($info);
@endphp
<div>
<h2>{{ $info->title}}</h2>
<a href="{{ route('service.show', 'slug' => $info->slug) }}">{{ $info->slug }}</a>
<br />- OR -<br />
<a href="{{ route('service.show', 'slug' => $info->slug, true) }}">{{ $info->slug }}</a>
<br />- OR -<br />
<a href="{{ $info->slug }}">{{ $info->slug }}</a>
</div>
@endforeach
@endif
</div>
</div>
Finally, I would suggest you turn Slick slider off until you get the links correct, then turn Slick slider back on.