wyyl/themes/default/design/slideshow.blade.php

55 lines
1.6 KiB
PHP

@push('header')
<script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
@endpush
<section class="module-item {{ $design ? 'module-item-design' : ''}}" id="module-{{ $module_id }}">
@if ($design)
<div class="module-edit">
<div class="edit-wrap">
<div class="down"><i class="bi bi-chevron-down"></i></div>
<div class="up"><i class="bi bi-chevron-up"></i></div>
<div class="delete"><i class="bi bi-x-lg"></i></div>
<div class="edit"><i class="bi bi-pencil-square"></i></div>
</div>
</div>
@endif
<div class="module-info mb-5">
<div class="swiper module-swiper-{{ $module_id }} module-slideshow">
<div class="swiper-wrapper">
@foreach($content['images'] as $image)
<div class="swiper-slide">
<a href="{{ $image['link']['link'] }}" class="d-flex justify-content-center"><img src="{{ $image['image'] }}" class="img-fluid"></a>
</div>
@endforeach
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script>
new Swiper ('.module-swiper-{{ $module_id }}', {
loop: true, // 循环模式选项
autoplay: true,
pauseOnMouseEnter: true,
clickable :true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</section>