site_logiciels/pages/actu.vue

<template>
  <div class="row">
    <div class="col-2">
      <button @click="goPrevious">Précédent</button>
      <button @click="goNext">Suivant</button>
    </div>
    <div class="col-8">
      <Carousel class="carrousel" :itemsToShow="3.5" :itemsToScroll="1" v-slot="{ carousel }">
        <Slide v-for="(actu, index) in actus" :key="index">
          <div class="card">
            <img class="card-img-top" :src="'https://picsum.photos/300/300?random='+index" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">{{ actu.title }}</h5>
              <p class="card-text">{{ actu.content }}</p>
              <p class="card-date">{{ actu.date }}</p>
            </div>
            <div class="card-footer">
              <button class="card-button">+</button>
            </div>
          </div>
        </Slide>
      </Carousel>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Carousel, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

const actus = ref([
  { title: 'Actu 1', content: 'Contenu 1', date: '20/06/2023' },
  { title: 'Actu 2', content: 'Contenu 2', date: '21/06/2023' },
  { title: 'Actu 3', content: 'Contenu 3', date: '22/06/2023' },
  { title: 'fenihfze', content: 'bjkeffbezk', date: '23/06/2023' },
  { title: 'Actu 1', content: 'Contenu 1', date: '24/06/2023' },
  { title: 'Actu 2', content: 'Contenu 2', date: '25/06/2023' },
  { title: 'Actu 3', content: 'Contenu 3', date: '26/06/2023' },
  { title: 'fenihfze', content: 'bjkeffbezk', date: '27/06/2023' }
]);

let carouselInstance;

const goNext = () => carouselInstance.value.advance(1);
const goPrevious = () => carouselInstance.value.advance(-1);

</script>

<style scoped>
.row {
  display: flex;
}

.col-4,
.col-8 {
  flex: 1 1 0;
}

.card {
  border-radius: 15px 15px 0 0;
  border: 1px solid #ccc;
  width: auto;
  height: auto;
}

.card-img-top {
  border-radius: 15px 15px 0 0;
  width: 100%;
  height: auto;
}

.card-date {
  font-size: 0.8em;
  color: #888;
}

.card-footer {
  text-align: right;
}

.card-button {
  background-color: transparent;
  border: none;
  font-size: 1.5em;
  color: #888;
}

</style>