[Vuejs]-Image carousel in Vue.js

by

0👍

you can use vue-splide component or swiper for your project.

with this example you can create a carousel for your website

npm i @splidejs/vue-splide

<template>
  <Splide :options="slideOptions" aria-label="tour carousel label">

    <SplideSlide v-for="movie in movies" :key="movie._id">
      <img :src="`http://localhost:3000/movie/image/${movie.poster}`"
            :alt="movie.title" />
    </SplideSlide>

  </Splide>
</template>

<script setup>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css';

//splide options
const slideOptions = {
   type : 'loop',
  perPage : 3,
  perMove : 1,
}
</script>

and you can find any options that you want in this link :
https://splidejs.com/guides/options/

Leave a comment