Example w/ multiple slides showing

This example plays nicely with CSS breakpoints to show a different number of slides depending on the viewport size. The data-snapper-setwidths attribute instructs Snapper to calculate item widths at a given viewport size based on the items' original %-based width (in this demo, 50%, then 33.33%, respectively), rather than filling the snapper width with a single item as it would by default. To use breakpoints in this way, be sure to include Snap Points that correspond to the item widths. See CSS for this example

CSS for this example

@media (min-width: 30em){
  .snapper_item {
    width: 40%;
    margin-right: 10%;
  }
  .snapper_pane {
    -webkit-scroll-snap-points-x: repeat(50%);
    -ms-scroll-snap-points-x: repeat(50%);
    scroll-snap-points-x: repeat(50%);
  }
}
@media (min-width: 50em){
  .snapper_item {
    width: 30%;
    margin-right: 3.3333%;
  }
  .snapper_pane {
    -webkit-scroll-snap-points-x: repeat(33.33333%);
    -ms-scroll-snap-points-x: repeat(33.33333%);
    scroll-snap-points-x: repeat(33.33333%);
  }
}