Slider in Apple store style

Question

I know I would show some effort in this but I have no idea... I'm trying to make a slider like the one in the store section of Apple website.

https://www.apple.com/store

The slider has to be aligned to the left side of the grid when the page is loaded and then it has to go full width when the user scrolls it. I can't find any solution. Can someone point me to the right direction?

Answer 1

there is a simple solution in this codepen:

https://codepen.io/ezadoo/pen/VwWEZBZ

var swiper = new Swiper(".snapslider-overflow", {
  cssMode: true,
  speed: 1000,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  //wrapperClass: "snapslider-scroll",
  //slideClass: "snapslider-card",
  slidesPerView: "auto",
  mousewheel: true,
  keyboard: true,
});

@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap");
$mobile-break: 668px;
$desktop-break: 1024px;

:root {
  --feat-leftpadding: 5rem;
  @media only screen and (min-width: $desktop-break) {
    //--feat-leftpadding: 6.5rem;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f7;
}
.ezd-feature-headline {
  padding-left: var(--feat-leftpadding);
  max-width: 30rem;
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 1.15em;
  letter-spacing: -0.03em;
  font-size: 1.25rem;

  @media only screen and (min-width: $desktop-break) {
    font-size: 1.75rem;
    max-width: 45rem;
  }

  .headline-primary {
    color: rgba(0, 0, 0, 1);
  }

  .headline-secondary {
    color: rgba(128, 128, 128, 1);
  }
  &.has-big {
    font-size: 2rem;
    @media only screen and (min-width: $desktop-break) {
      font-size: 3rem;
    }
  }
}
.snapslider-card {
  font-size: 1.25rem;
  display: block;
  // background-color: red;
  width: 14.5em;
  height: 18.5em;
  //border: 1px solid black;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-right: 0.75em;
  //float: left;
  flex-grow: 0;
  flex-shrink: 0;
  scroll-snap-align: start;

  @media only screen and (min-width: $desktop-break) {
    font-size: 1.75rem;
  }

  &:nth-child(even) {
    // background-color: blue;
  }
  &:first-child {
    padding-left: var(--feat-leftpadding);
  }
  &:last-child {
    //padding-right: 0;
  }
  //box-sizing: border-box;

  .card-content {
    border-radius: 0.75em;
    background: #ffffff;
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  }
}
.ezd-snapslider {
  margin-bottom: 2rem;
  position: relative;
  &::-webkit-scrollbar {
    //display: none;
  }
  .snapslider-overflow {
    //padding-left: 6rem;
    //width: calc(100% - 6rem);
    //overflow: visible;
    &::-webkit-scrollbar {
      //display: none;
    }
  }
  .snapslider-scroll {
    display: flex;
    flex-wrap: nowrap;
    height: auto;
    width: auto;
    //padding-left: 6rem;
    //overflow: visible;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    //scroll-padding: 0 var(--feat-leftpadding);
    scroll-padding: 0 5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<div class="ezd-content">
  <h2 class="ezd-feature-headline has-big">
    <span class="headline-primary">Slider.</span>
    <span class="headline-secondary">This is for demonstration purposes, to show the need of scroll-padding.</span>
  </h2>
  <h3 class="ezd-feature-headline">
    <span class="headline-primary">Another Line.</span>
    <span class="headline-secondary">Simply here for more text.</span>
  </h3>
  <div class="ezd-snapslider">
    <div class="snapslider-wrapper">
      <div class="snapslider-overflow">
        <div class="snapslider-scroll swiper-wrapper">
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
          <div class="snapslider-card swiper-slide">
            <div class="card-content"></div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</div>