Как сделать для изображение rasatom границу сверху?

Question

[Taulan Khatuaev]

<template>
  <Carousel :wrap-around="true" :show-navigation="false" :breakpoints="breakpoints" :autoplay="2000">
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <img :src="slide.image" :alt="'Slide ' + slide.id" class="carousel__image" :style="{ border: isRosatom(slide) ? '1px solid #ddd' : 'none' }">
      </div>
    </Slide>
    <template #addons>
      <Navigation show-arrows="false" />
      <Navigation />
    </template>
  </Carousel>
</template>

<script setup>
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Navigation } from 'vue3-carousel'
const slides = [
  { id: '1', image: require('@/img/rosatom.jpg')},
  { id: '2', image: require('@/img/kubgu.jpg')},
  { id: '3', image: require('@/img/gazprom.jpg')},
  { id: '4', image: require('@/img/vtb.jpg')},
  { id: '5', image: require('@/img/kubgu.jpg')},
  { id: '6', image: require('@/img/rosatom.jpg')},
  { id: '7', image: require('@/img/kubgu.jpg')},
];
const breakpoints = {
  // 320px and up
  320: {
    itemsToShow: 2,
    snapAlign: 'center',
  },
  // 700px and up
  768: {
    itemsToShow: 4,
    snapAlign: 'center',
  },
  // 1024 and up
  1024: {
    itemsToShow: 6,
    snapAlign: 'start',
  },
  
};
const isRosatom = (slide) => slide.image === require('@/img/rosatom.jpg');
</script>

<style>
.carousel__item {
  margin-left: 5px;
  margin-right: 5px;
}

.carousel__image {
  max-height: 155px;
  width: calc(100% + 2px); /* Увеличиваем ширину изображения на 2px для компенсации границы */
  object-fit: contain;
  margin: -1px; /* Отрицательные отступы для компенсации границы */
}

.carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 155px;
  margin-top: 10px;
  padding: 10px;
}

.carousel__slide {
  width: 291px;
  height: 155px;
  background-color: white;
  padding: 10px;
}

.carousel__prev,
.carousel__next {
  display: none;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 767px) {
  .carousel__slide {
    width: 100%; /* Изменено для мобильных устройств */
  }
}
</style>

а у остальных есть

Comments

[Taulan Khatuaev]