CODEWITHSUNDEEP
vuejs2carouselbootstrap-vue
Ömer Doğan
Ömer Doğan

Reputation: 691

How can we show multiple items with Bootstrap-Vue Carousel?

I think boostrap-vue carousel not so detailed. For this reason i can't reach to nice solution.

I wanna just show 3 items (like in image) in my app and i didnt find the solution and i searched other package and there was no solution for me.

All i want to do like this;

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>

If you have any other library suggestion i would appreciate.

Thanks for help.

Upvotes: 2

Views: 8586

Answers (3)

Pramuditha
Pramuditha

Reputation: 738

I did the same thing using b-card-group. Because b-carousel does not support showing multiple items.

In template area

  <div>

    <!-- carousel area -->
    <b-card-group deck class="mb-0">
        <b-card  v-for="(item,index) in currentPageCards" :key="index" class="mr-0">
            <!-- card content -->
        </b-card>
    </b-card-group>

    <!-- pagination area -->
    <div class="pagination" v-if="cards.length>cardsPerPage">
        <div class="index" v-for="i in pageCount" :key="i" @click="next(i)" :class={active:currentPage(i)}></div>
    </div>
  </div>

In script area

 data() {
     return {
         cards: [{
                   //Data in the card as objects
                 },{},{},{},{}],
         paginatedCards:[],
         pageCount:0,
         cardsPerPage:4,
         currentPageIndex:0
     }
 },

 computed: {
    currentPageCards(){
        this.createPages();

        return this.paginatedCards[this.currentPageIndex];
    }
 },

 methods:{
    currentPage(i){
        return i-1===this.currentPageIndex;
    },

    createPages() {
        let cardsLength = this.cards.length;
        let fullPagesCount = Math.floor(cardsLength/this.cardsPerPage);

        if(cardsLength>this.cardsPerPage) {
            this.pageCount = 0;
            for (let i = 0; i < fullPagesCount * this.cardsPerPage; i += this.cardsPerPage) {
                this.paginatedCards[this.pageCount] = this.cards.slice(i,i + this.cardsPerPage);
                this.pageCount++;
            }

            this.paginatedCards[this.pageCount] = this.cards.slice(cardsLength-this.cardsPerPage,cardsLength);
            this.pageCount = this.pageCount+1;
        } else {
            this.paginatedCards[0] = this.cards;
        }
    },

    next(i){
        this.currentPageIndex=i-1;
    }
 }

In style area

.pagination{
    display:flex;
    align-items: center;
    justify-content: center;
    padding:10px;
}

.index{
    margin-left:10px;
    width:10px;
    height:10px;
    background:#000000
}

.active{
    width:15px;
    height:15px;
}

It shows like as below

enter image description here

Try this one. Thank you!

Upvotes: 1

Troy Morehouse
Troy Morehouse

Reputation: 5435

BootstrapVue <b-carousel> is designed to only show a single slide at a time (as is the standard bootstrap V4.x carousel component). There are never more than 2 slides visible at once (during the slide or fade transition, all other slides are hidden. CSS transforms are used to make the appearance of the slides moving)

You would need to either find a 3rd party component that supports multiple slides showing, or generate your own custom component.

Upvotes: 3

Chris B.
Chris B.

Reputation: 5763

I'm not familiar with this specific component, but this is from its documentation:

      <!-- 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>

I would try using a blank image as the default and inserting whatever other images/content you want as children of the 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>

And use absolute positioning or flexbox to display them the way you want.

Upvotes: 2

Related Questions