Feature Request: Create prop to add margin between elements

[Jorjon]

I'm increasing horizontal margin on VueCarousel-slide, but the carousel is being cut off.

I can set flex-basis manually but it doesn't get updated with resolution changes.

  <carousel :perPage="5" :navigationEnabled="true" :paginationEnabled="false">
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel';

export default {
  components: {
    Carousel,
    Slide,
  },
};
</script>

<style lang="scss">
  $margin: .5%;
  $padding: 1%;

  .VueCarousel-inner {
    /*flex-basis: 327px !important;*/
  }

  .VueCarousel-slide {
    margin: 0 $margin 0 $margin;
    padding: $padding $padding $padding $padding;
    border: 2px solid #0e5a7e;

    img {
      width: 100%;
    }
  }

  .VueCarousel-navigation-button {
    color: inherit !important;
  }
</style>

[glutaminefree]

I want margin between slides too!

[codenamics]

up

[quinnlangille]

Hey guys, we actually do have a spacePadding prop that adds padding between slides. I'm aware it's not the same, but it can achieve a similar look if that's all that's required. Otherwise adding the margin would be easy enough, will just need someone to submit the PR!

If you run the dev server, you can see an example inside vue-play at localhost:5000

I'll make this as a good first feature to try and get some traction

[CavalcanteLeo]

spacePadding does not add spaces between slides, but add extra space on edges left/right of carousel

[CavalcanteLeo]

to add some space on each slide, i added on css 8px padding left/right on each slide

[markus361]

to add some space on each slide, i added on css 8px padding left/right on each slide

@CavalcanteLeo, did you encounter a bug in IE11? I tried to do the same an but slides don't fit the slider width anymore

[KaragiannidesAgapios]

@markus361 Maybe a bit late to answer but I had the same issue. I check this thread, understand the problem and my solution was, this one:

if feasible, do not apply padding or border directly to a flex child. Allow the flex child to be a containing element to another element that will receive the padding or border. This is somewhat undesirable because avoiding this sort of extra markup is one the big benefits of box-sizing:border-box;.

        .VueCarousel-slide > div {
            padding-left: 15px;
            padding-right: 15px;
        }

This solved the problem for me.

[lamoquette]

up please

[Torone]

Guys, use padding instead...

[lerik1408]

In the slide tag, make a wrap and set it to padding : 0 10px;

[oroojtatiev]

with padding is bool sheet

[rafikmoreira]

Has it not been implemented?

[oza75]

@KaragiannidesAgapios proposition solved my issue too.

[OctopussyO]

up

[CavalcanteLeo]

Stop using this lib.

It's full of bugs, and it's abandoned.

Use this instead: https://gs-shop.github.io/vue-slick-carousel/#/