Slide that exceeds the screen ? (I don't know how to name it)

How To
5

For showing multiple slides and have them cut off at the side play around with the following values:

  • Set slide with to less than 100% maybe 40% or whatever fits your usecase
  • Use center Mode
  • Set slides to show to 2.5 or something

I think you might be able to just use padding as well as shown here on the 2nd example once you scroll down a bit

As for thumbnail sliders, check out this thread How to Sync 2 Sliders - #13 by tobiashaas

Here is a slider setup I’m currently using which isn’t exactly your use case but might give you a starting point, combined with the suggested settings above.

image
image1333×523 3.52 KB

Custom options in Slider:

{
  "type":"loop",
  "autoplay": true,
  "perPage": 1,
  "padding":"2rem",
  "mediaQuery": "min",
  "autoWidth": true,
  "trimSpace": true,
  "updateOnMove": true,
  "gap":"-50px",
  "waitForTransition":false,
  "focus": "center",
  "breakpoints": {
    "640": {
      "gap":"-10%",
      "padding":"0",
      "perPage": 3
    }
  }
}

CSS applied to the slider, targeting the first child of the slides for the scale instead of the slide directly:

root .splide__slide .slide-content {
  transition: .3s all ease-out;
}
root .splide__slide:not(.is-active) .slide-content {
 transform: scale(.8);
}
root .splide__slide.is-active {
  z-index: 9;
}
root .splide__slide.is-active .slide-content-title {
  opacity: 1;
}

Settings on the actual Slide element:
image

Haven’t tried but in theory, if you copy my slider, change the gap to a positive value and the perPage value to 3.5 or something, you should get pretty close to what you’re after.

1 Like