-1

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/

hes
  • 121
  • 2
  • 14
  • Why do you need to use a slider plugin for that? You can achieve this simply by using scrollable container in my opinion... – Djov Mar 08 '23 at 14:11
  • I know but I need a draggable solution. Otherwise I would not ask – hes Mar 08 '23 at 14:17
  • Take a look at https://htmldom.dev/drag-to-scroll/ for inspiration. – Djov Mar 08 '23 at 14:20

1 Answers1

0

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>
granite
  • 304
  • 4