I'm trying to do a swiper using laravel api vue js composition api, the swiper doesn't work, it was working at first with the template(statically using the swiper code in main.js), but when I added some vueJs code, it stopstemplate.blade.php:
<div id="app"><router-view></router-view> </div></main><!-- End #main -->I've imported there all css and js files that came with the template
Index.vue :
<template>...<div class="container" data-aos="fade-up"><div class="section-title"><h2>Actualités</h2><p>Dernières Actualités</p><router-link :to="{ name: 'Actualites' }" > Actualites view</router-link></div></div><section id="testimonials" class="testimonials"><div class="container" data-aos="zoom-in"><div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100"><div class="swiper-wrapper"><div class="swiper-slide" v-for="actualite in actualites" :key="actualite.id"><div class="testimonial-item" v-if="actualite.images.length > 0"><img :src="'/storage/'+ actualite.images[0].url" :alt="actualite.images[0].caption" class="testimonial-img"><h3>{{ actualite.title }} Actualité de 05/04/2024</h3><br><p><h2><i class="bx bxs-quote-alt-left quote-icon-left"></i> {{ actualite.content }}<i class="bx bxs-quote-alt-right quote-icon-right"></i></h2><h4>Lire plus</h4></p></div></div><!-- End testimonial item --></div><div class="swiper-pagination"></div></div></div></section></template> <script> import { ref, onMounted } from 'vue'; import Swiper from 'swiper'; import 'swiper/swiper-bundle.css'; import useActualites from '../composition-api/useActualites'; import HeaderIndex from './HeaderIndex.vue'; export default { name: 'Index', components: { HeaderIndex }, setup() { const { actualites, fetchActualites } = useActualites(); // Chargement des actualités lors de la création du composant onMounted(() => { fetchActualites(); // Initialisation de Swiper pour testimonials-slider new Swiper('.testimonials-slider', { speed: 600, loop: true, autoplay: { delay: 5000, disableOnInteraction: false }, slidesPerView: 'auto', pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true } }); }); return { actualites, fetchActualites }; } }</script>And style.css:
.testimonials .swiper-pagination { margin-top: 20px; position: relative;}.testimonials .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.4); opacity: 0.5;}.testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: #ffc451; opacity: 1;}@media (min-width: 1024px) { .testimonials { background-attachment: fixed; }}@media (min-width: 992px) { .testimonials .testimonial-item p { width: 80%; }useActualites.js:
import { ref } from "vue";export default function useActualites() { const errors = ref({}); const generalError = ref(null); const actualites = ref([]); //Home const fetchActualites = async () => { try { const response = await fetch('/api/actualites'); if (!response.ok) { throw new Error('Failed to fetch actualites'); } const data = await response.json(); console.log(data) actualites.value = data; } catch (error) { console.error('Error fetching actualites:', error); } }; return { errors, generalError, actualites, fetchActualites };}All is good except the Swiper Part, it doesn't work, it displays juste the first actualité, knowing that the api is just fine.