如何解决为什么刷卡导航导航Ajax Laravel无法正常工作
代码交换器
var swiperTerkini = new Swiper('.swiper-terkini',{
slidesPerView: 1,spaceBetween: 5,loop: false,observer: true,navigation: {
nextEl: '#next-3',prevEl: '#prev-3',},breakpoints: {
'@0.00': {
slidesPerView: 1,'@0.75': {
slidesPerView: 2,'@1.00': {
slidesPerView: 5,});
代码Ajax jQuery
$(document).ready(function() {
$('.swiper-button-next').on('click',function(e){
e.preventDefault();
var url = $(this).attr('href');
getArticles(url);
});
function getArticles(url) {
$.ajax({
url : url
}).done(function (response) {
var data = response['response']['data'];
console.log(data)
var count = data.length;
var isi = '';
for (var i = 0; i < count; i++){
console.log(response['response']['data'][i].id);
var id = response['response']['data'][i].id;
var img = response['response']['data'][i].cover_img;
isi += `<div class="swiper-slide">
<a href="javascript:void(0)" id="click"
onclick="toggleSelengkapnya('video-terkini',${id})">
<div class="program-img-container">
<img src="storage/media/${img}"
alt="" width="100%" height="120vh" class="img-program">
</div>
</a>
</div>`;
}
// jQuery(isi).appendTo(jQuery('.swiper-wrapper','.swiper-terkini'));
swiperTerkini.removeAllSlides();
swiperTerkini.appendSlide(isi);
swiperTerkini.update(true);
}).fail(function () {
alert('Videos could not be loaded.');
});
}
});
代码刀片视图
<a href="{{ $dataVideo->previousPageUrl() }}" class="swiper-button-prev" id="prev-3"
style="color: white; outline: none">
{{$dataVideo->links()}}
</a>
</div>
<div class="col-10 col-slider">
<div class="row">
<div class="col-12">
<h5>Video Terkini</h5>
</div>
</div>
<div
class="swiper-container swiper-terkini swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper">
@foreach ($dataVideo as $key => $data)
<div class="swiper-slide" id="video-data">
<a href="javascript:void(0)" id="click"
onclick="toggleSelengkapnya('video-terkini',{{ $data->id }})">
<div class="program-img-container">
<img src="{{$data && $data->cover_img ? '/storage/media/'. $data->cover_img : '/bnpt/assets/images/nature.jpg' }}"
alt="" class="img-program">
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
<div class="col-1">
<a href="{{$dataVideo->nextPageUrl()}}" class="swiper-button-next next-slide" id="next-3">
{{$dataVideo->links()}}
</a>
</div>
我已经尝试了上面的代码,但是它并不符合我的意愿,我的愿望是当我们执行Next时,发生的事情是数据在做滑块,而上一个和下一个在做滑块时一样数据,我该如何解决问题,我很难解决这个问题,也许我的朋友可以解决这个问题,如果有请帮助我,谢谢您?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。