Vue-carousel: Feature: Show slides partly on the edges like in Netflix

[lggwettmann]

Is it possible to show only a part of the slide on the outside like in Netflix? This way users get a visual clue that it's a carousel without the need of the pagination dots or navigation arrows.

If it's not possible yet, would be great to get an option for it. Thanks for your work on this great package.

[quinnlangille]

Hey @lggwettmann, I don't think this is currently possible without doing some CSS magic. I agree that it could be a cool feature to add as a prop, maybe like previewNextSlide = true/false.

I'll switch this to a feature request!

[RyanLiu0235]

Hi, @quinnlangille @lggwettmann , I have made a PR # 165 to meet this need. This isn't impossible, but we truly have to do some css tricks.

[RyanLiu0235]

Oops, it's really awkward! I didn't read the API carefully before, forget about that PR. With the ready-made API we could make it. But something goes wrong with slideWidth when advanced to the last page.

.add("Custom width", {
  components: { Carousel, Slide },
  render: h => {
    return createContainer(
      h, containerWidth, [h(Carousel, {
        props: {
          perPage: 1,
          spacePadding: 10
        }
      }, [new Array(8).fill(0).map((item, index) => {
        return h(Slide, {}, [h("div", {
          style: {
            width: "100%",
            height: "400px",
            lineHeight: "400px",
            color: "#fff",
            textAlign: "center",
            fontSize: "30px",
            backgroundColor: (index % 2 === 0) ? "#42b983" : "#ff3c3c"
          }
        }, [index])])
      })])]
    )
  }
})

[quinnlangille]

Just a heads up, this was resolved with the release of v0.6.14 - you're now able to use the spacePadding prop to enable the look ahead style slider like Netflix. Thanks for making the request 👍

[lggwettmann]

Wow, awesome @quinnlangille and @stop2stare Thanks so much.