Создание горизонтального перетаскиваемого списка с помощью Swiper - PullRequest
Новая
       18

Создание горизонтального перетаскиваемого списка с помощью Swiper

0 голосов
/ 23 сентября 2019

Я пытаюсь создать горизонтальный список элементов (текста), которые можно перетаскивать: 

var scroll = new Swiper('#scroll-tags', {
  slidesPerView: 'auto',
  freeMode: true,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    dragSize: 100,
  },
  mousewheel: true,
});

Разметка: 

<div class="swiper-container" id="scroll-tags">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <ul class="tags-list">
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
                ...
            </ul>
        </div>
    </div>
    <div class="swiper-scrollbar"></div>
</div>

И немного CSS: 

.tags-list {
   display: flex;
   align-items: center;
   white-space: nowrap;
}

Мои проблемы: 1. не работает полоса прокрутки;2. Когда я перетаскиваю и отпускаю, список возвращается в исходное положение.

https://codepen.io/marcelo2605/pen/KKPJpZa?editors=1010

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

Модифицированный ответ, теперь, когда я понимаю, что вы хотите.Я взял демоверсию, объединенную с вашей скрипкой, и внес некоторые изменения

  • изменил направление свипера на горизонтальное: direction: 'horizontal',
  • изменил ширину слайда, чтобы подогнать его под список (это ключ):.swiper-slide { width: auto;
  • явно показывать полосу прокрутки (необязательно, но полезно знать): $('.swiper-scrollbar').show();

Полный рабочий код ниже 

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="js/jquery-3.4.1.min.js"></script>
    <link href="css/swiper.min.css" rel="stylesheet" />

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

        body {
            background: #fff;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            font-size: 18px;
            height: auto;
            width: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 30px;
        }

        .swiper-container {
            overflow-x: hidden;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        li {
            margin: 0.25rem 0.75rem 0.25rem 0;
        }

        a {
            display: block;
            color: #fff;
            border-radius: 50px;
            padding: 0.25rem 1rem;
            background-color: gray;
            font-size: 18px;
            border: solid 1px gray;
        }
    </style>

    <script>
        $(document).ready(function () {
            var swiper = new Swiper('#scroll-tags', {
                direction: 'horizontal',
                slidesPerView: 'auto',
                freeMode: true,
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
                mousewheel: true,
            });

            $('.swiper-scrollbar').show();
        });
    </script>
</head>

<body>

    <div class="swiper-container" id="scroll-tags">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <ul class="tags-list">
                    <li><a href="">Item 1</a></li>
                    <li><a href="">Item 2</a></li>
                    <li><a href="">Item 3</a></li>
                    <li><a href="">Item 4</a></li>
                    <li><a href="">Item 5</a></li>
                    <li><a href="">Item 6</a></li>
                    <li><a href="">Item 7</a></li>
                    <li><a href="">Item 8</a></li>
                    <li><a href="">Item 9</a></li>
                    <li><a href="">Item 10</a></li>
                    <li><a href="">Item 11</a></li>
                    <li><a href="">Item 12</a></li>
                </ul>
            </div>
        </div>
        <div class="swiper-scrollbar"></div>
    </div>
    <script src="js/swiper.min.js"></script>
</body>

</html>

swiper

0 голосов
/ 24 сентября 2019

CSS решение

Для простого перетаскиваемого меню Swiper не нужен ( Overkill ).Когда вы устанавливаете переполнение для прокрутки (или авто) - полоса прокрутки на мобильном телефоне выглядит великолепно. 

.scroll {
  white-space: nowrap; 
  overflow-x: auto;
}

Swiper горизонтальное направление прокрутки на основе слайдов (CSS селектор .swiper-container-vertical).

Раствор Swiper

Использование слайдов (не один длинный слайд с overflow:auto) ** Снова "перебор"

https://codepen.io/ezra_siton/pen/PoYVBqZ

var swiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  freeMode: true,
  slideToClickedSlide: true,
  spaceBetween: 10,
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
    dragSize: 100
  },
  mousewheel: true
});
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 34px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: auto;
  padding-bottom: 15px!important; /*space for the scrollbar*/
}
.swiper-slide {
  width: auto!important; /*remove all important from your code*/
  background-color: #333;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  border-radius: 30px;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li:hover {
  background-color: #111;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>

<br>
<div class="swiper-container" id="scroll-tags">
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><a href="#">item 1</a></li>
    <li class="swiper-slide"><a href="#">item 2</a></li>
    <li class="swiper-slide"><a href="">item 3</a></li>
    <li class="swiper-slide"><a href="#">item 4</a></li>
    <li class="swiper-slide"><a href="#">item 5</a></li>
    <li class="swiper-slide"><a href="#">item 6</a></li>
    <li class="swiper-slide"><a href="#">item 7</a></li>
    <li class="swiper-slide"><a href="#">item 8</a></li>
    <li class="swiper-slide"><a href="#">item 9</a></li>
    <li class="swiper-slide"><a href="#">item 10</a></li>
    <li class="swiper-slide"><a href="#">item 11</a></li>
    <li class="swiper-slide"><a href="#">item 12</a></li>
    <li class="swiper-slide"><a href="#">item 13</a></li>
    <li class="swiper-slide"><a href="#">item 14</a></li>
    <li class="swiper-slide"><a href="#">item 15</a></li>
    <li class="swiper-slide"><a href="#">item 16</a></li>
    <li class="swiper-slide"><a href="#">item 17</a></li>
    <li class="swiper-slide"><a href="#">item 18</a></li>
    <li class="swiper-slide"><a href="#">item 19</a></li>
    <li class="swiper-slide"><a href="#">item 20</a></li>
  </ul>
  <div class="swiper-scrollbar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

Swiper "плохой" Один длинный слайд

Снова странно (мощность Swiper основана на слайдах) - но также будет работать 

var swiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  freeMode: true,
  slideToClickedSlide: true,
  spaceBetween: 20,
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true
  },
  mousewheel: true
});

//horizontal
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 34px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: auto;
  padding-bottom: 30px!important; /*space for the scrollbar*/
}
.swiper-slide {
  width: auto!important;;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  background-color: #333;
}
a {
  color: white;
  text-align: center;
  padding: 10px 40px;
  text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>

<br>
<div class="swiper-container" id="scroll-tags">
  <ul class="swiper-wrapper">
    <div class="swiper-slide">
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
      <a href="#">Very long item</a>
    </div>
  </ul>
  <div class="swiper-scrollbar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
...