vertical content/image slider free dragging

Question

I´m trying to find a way to swipe a container full of images vertical. All sliders I testet so far (swiper, owl, slick) doesnt work properly. Slick-Slider is the only one which comes near.

My goal is to swipe trough all images from top to bottom. Just like the freemode in swiper does (https://codesandbox.io/s/mio1m) - just the vertical way.

HTML

<div class="images">
   <div class="slider">
        <img src="https://via.placeholder.com/640x320/124477/" />
        <img src="https://via.placeholder.com/640x220/2288AA/" />
        <img src="https://via.placeholder.com/640x220/AABB44/" />
        <img src="https://via.placeholder.com/640x320/124477/" />
        <img src="https://via.placeholder.com/640x420/994477/" />
        <img src="https://via.placeholder.com/640x520/AABB44/" />
    </div>
</div>

CSS

* {
margin:0px;
padding:0px;
border:none;
outline:none;
}

img {
max-width: 100% !important;
height: auto !important;
vertical-align: bottom;
width: 100%
}

.images {
height: 100vh;
width:500px;
margin:0 auto;
overflow:hidden;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}

.slick-list {
height: 100vh !important
}

JS

$('.slider').slick({
vertical: true,
swipeToSlide: true,
verticalSwiping: true,
infinite: false,
arrows: false
});

Fiddle: https://jsfiddle.net/m0qxhy95/1/

Answer 1

Since your jsfiddle was using SwiperJS we'll expound upon that since that one does have vertical and free mode capability together. Go to their main webpage then "view source code": swiperJS link This following example mirrors the above link. We temporarily added a color tone so its easy to see the background from the image location. This model is full screen width, but by adding an extra outer container around it you can limit a sliders total width on the web page if desired.

      var swiper = new Swiper(".mySwiper", {
        loop: true,
        freeMode: true,
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {background-color: #eee; border:1px solid #ccc;}/*--temp--*/
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" rel="stylesheet"/>
    <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>