Как мы можем показать несколько предметов с помощью Bootstrap-Vue Carousel? - PullRequest
Новая
       46

Как мы можем показать несколько предметов с помощью Bootstrap-Vue Carousel?

1 голос
/ 12 мая 2019

Я думаю, что карусель boostrap-vue не такая подробная. По этой причине я не могу найти хорошее решение.

Я хочу просто показать 3 элемента (как на картинке) в моем приложении, и я не нашел решения, и я искал другой пакет, и для меня не было решения.

Все, что я хочу сделать, вот так;

All i want to do this.

data() {
    return {
      slide: 0,
      sliding: null
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div>
  <b-carousel id="carousel-1" v-model="slide" :interval="0" controls indicators background="white" img-width="650" img-height="480" @sliding-start="onSlideStart" @sliding-end="onSlideEnd">
    <b-carousel-slide caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img-src="https://picsum.photos/1024/480/?image=52"></b-carousel-slide>

    <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
      <h1>Hello world!</h1>
    </b-carousel-slide>

    <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

    <b-carousel-slide>
      <img slot="img" class="d-block img-fluid w-100" width="1024" height="480" src="https://picsum.photos/1024/480/?image=55" alt="image slot">
    </b-carousel-slide>
  </b-carousel>

  <p class="mt-4">
    Slide #: {{ slide }}<br> Sliding: {{ sliding }}
  </p>
</div>

Если у вас есть какие-либо другие предложения по библиотеке, я был бы признателен.

Спасибо за помощь.

Ответы [ 2 ]

2 голосов
/ 12 мая 2019

Я не знаком с этим конкретным компонентом, но это из его документации: 

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

Я бы попробовал использовать пустое изображение по умолчанию и вставить любые другие изображения / контент, которые вы хотите, как детислайда: 

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <img class="my-img" src="img1.jpg"/>
        <img class="my-img" src="img2.jpg"/>
        <img class="my-img" src="img3.jpg"/>
      </b-carousel-slide>

И используйте абсолютное позиционирование или flexbox, чтобы отобразить их так, как вы хотите.

1 голос
/ 14 мая 2019

BootstrapVue <b-carousel> предназначен для показа только одного слайда за раз (как и стандартный компонент карусели bootstrap V4.x). Никогда не видно более двух слайдов одновременно (при переходе между слайдами или плавным переходом все остальные слайды скрыты. Преобразования CSS используются для создания движения слайдов)

Вам потребуется либо найти сторонний компонент, который поддерживает показ нескольких слайдов, либо создать собственный пользовательский компонент.

...