使用 Swiper 创建水平可拖动列表

Question

我正在尝试创建一个可以拖动的项目（文本）的水平列表：

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

Answer 1

修改答案，现在我明白你想要什么了。我将演示与您的 fiddle 合并并进行了一些更改

将滑动条方向更改为水平：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>

Answer 2

CSS解决方案

对于简单的可拖动菜单，不需要 Swiper (Overkill)。当您将溢出设置为滚动（或自动）时 - 移动设备上的滚动条看起来很棒。

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

Swiper 水平滚动方向基于幻灯片（CSS 选择器是 .swiper-container-vertical）。

刷卡解决方案

使用 幻灯片（没有一张长幻灯片 overflow:auto） **再次 "overkill"

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 "bad" 一张长幻灯片

同样很奇怪（基于幻灯片的滑动能力）- 但也可以工作

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>

使用 Swiper 创建水平可拖动列表

Creating horizontal draggable list using Swiper

javascript

swiper

CSS解决方案

刷卡解决方案

Swiper "bad" 一张长幻灯片