Как сделать так, чтобы цвета карусели стали менее заметными по краям в Vue. JS - PullRequest
Новая
       54

Как сделать так, чтобы цвета карусели стали менее заметными по краям в Vue. JS

0 голосов
/ 25 февраля 2020

Я начинаю в front dev для чата, который я создаю, я просто новичок, который пытается найти свой путь. Я хочу сделать цветовую схему менее видимой по краям моей карусели.

Вот как она сейчас находится в своем текущем состоянии: enter image description here

Это это код карусели в моем приложении. vue

  <carousel v-if="hide">
    <div class="nav-button-favoris">
      <button
        v-for="(favoris, index) in favoriteWindow"
        :key="index"
        @click.prevent="hideDisplay"
        @click="addMessage(favoris[1])"
        class="button-favoris clickable"
      >
        {{ favoris[1] }}
      </button>
    </div>
  </carousel>
</div>

, и это код моей карусели в /components/Carousel/Carousel.vue, который я импортирую в приложение. vue : 

<template>
    <div>
        <slot></slot>
        <div class="uk-flex-middle uk-flex uk-flex-between">
            <button class="carousel-nav carousel-prev" @click="prev"></button>
            <button class="carousel-nav carousel-next" @click="next"></button>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        next() {
            this.$store.dispatch('general/favoriteNext')
        },
        prev() {
            this.$store.dispatch('general/favoritePrev')
        },
    }
}
</script>

<style>
    .carousel-nav {
        border: none;
        background: rgba(254, 254, 254, 0);
        width: 25px;
        height: 25px;
        background-size: 25px;
        cursor: pointer;
     }
     .carousel-nav.carousel-next {
         background-image: url("arrow-right.png");
         background-repeat: no-repeat;
         position: absolute;
         right: 20px;
         bottom: 80px;
      }
     .carousel-nav.carousel-prev {
         background-image: url("arrow-right.png");
         background-repeat: no-repeat ;
         transform: scaleX(-1);
         position: absolute;
         left: 20px;
         bottom: 80px;
     }
</style>

Я ищу руководство, если есть способ сделать цвета блеклыми или просто края становятся менее заметными. Есть идеи?

...