admin管理员组

文章数量:1326447

I'm trying to create a horizontal list of items (text) that can be dragabble:

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

The markup:

<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>

And some CSS:

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

My problems: 1. scrollbar not working; 2. When I drag and release, the list back to the original position.

I'm trying to create a horizontal list of items (text) that can be dragabble:

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

The markup:

<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>

And some CSS:

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

My problems: 1. scrollbar not working; 2. When I drag and release, the list back to the original position.

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

  • javascript
  • swiper.js
Share Improve this question edited Sep 23, 2019 at 14:31 marcelo2605 asked Sep 23, 2019 at 14:01 marcelo2605marcelo2605 2,7945 gold badges31 silver badges58 bronze badges 3
  • Trying to figure out what you are trying to create. Can you describe some more. Swiper creates slides that you can flip through. – Hassan Voyeau Commented Sep 23, 2019 at 14:26
  • @HassanVoyeau I create a codepen to help. – marcelo2605 Commented Sep 23, 2019 at 14:32
  • Got it to work. See my modified answer. – Hassan Voyeau Commented Sep 23, 2019 at 15:51
Add a ment  | 

2 Answers 2

Reset to default 3

CSS solution

For a simple draggable menu no need for Swiper (Overkill). When you set overflow to scroll (or auto) - the scrollbar on mobile looks great.

.scroll {
  white-space: nowrap; 
  overflow-x: auto;
}
  • https://www.w3schools./howto/howto_css_menu_horizontal_scroll.asp
  • https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

Swiper horizontal scroll direction based on slides (CSS selector is .swiper-container-vertical).

Swiper solution

Use slides (Not one long slide with overflow:auto) **Again "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./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./ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

Swiper "bad" One long slide

Again weird (Swiper power based on slides) - but also will work

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./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./ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

Modified answer, now that I understand what you want. I took the demo merged with your fiddle and made some changes

  • changed swiper direction to horizontal : direction: 'horizontal',
  • changed width of slide to fit list (this is the key) : .swiper-slide { width: auto;
  • explicitly show scrollbar (optional but good to know) : $('.swiper-scrollbar').show();

Complete working code below

<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>

本文标签： javascriptCreating horizontal draggable list using SwiperStack Overflow

版权声明：本文标题：javascript - Creating horizontal draggable list using Swiper - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742214180a2434263.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。