swiper7-11. 控制滑动方向（竖直，横向）

<template>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h4>Scroll Container</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex
          eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor
          lectus eu libero. Vestibulum venenatis eget turpis sed faucibus.
          Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante,
          luctus non ante sit amet, sodales vulputate odio. Aenean tristique
          nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque
          dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit
          ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt
          tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc.
          Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget
          non est. Fusce convallis vestibulum dolor non volutpat. Vivamus
          vestibulum quam ut ultricies pretium.
        </p>
        <p>
          Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna
          consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna
          sit amet, aliquet molestie purus. Phasellus faucibus, leo vel
          scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante
          orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis
          bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut
          nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus
          facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet
          sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam
          mollis dignissim purus id efficitur.
        </p>
        <p>
          Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat
          elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit.
          Integer tincidunt finibus metus vel porta. Mauris sed mauris congue,
          pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et
          lacinia. Suspendisse augue justo, convallis eget arcu in, pretium
          tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.
        </p>
        <p>
          Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id
          tempor vulputate, nisi justo cursus justo, pellentesque condimentum
          diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis
          parturient montes, nascetur ridiculus mus. In placerat tellus a
          posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium
          in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque
          orci aliquam. Vestibulum elementum posuere vehicula.
        </p>
        <p>
          Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id
          arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum,
          erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu
          rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum
          consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum.
          Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero.
          Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus
          tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus
          lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat
          tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit
          venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium
          scelerisque.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex
          eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor
          lectus eu libero. Vestibulum venenatis eget turpis sed faucibus.
          Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante,
          luctus non ante sit amet, sodales vulputate odio. Aenean tristique
          nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque
          dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit
          ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt
          tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc.
          Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget
          non est. Fusce convallis vestibulum dolor non volutpat. Vivamus
          vestibulum quam ut ultricies pretium.
        </p>
        <p>
          Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna
          consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna
          sit amet, aliquet molestie purus. Phasellus faucibus, leo vel
          scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante
          orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis
          bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut
          nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus
          facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet
          sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam
          mollis dignissim purus id efficitur.
        </p>
        <p>
          Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat
          elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit.
          Integer tincidunt finibus metus vel porta. Mauris sed mauris congue,
          pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et
          lacinia. Suspendisse augue justo, convallis eget arcu in, pretium
          tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.
        </p>
        <p>
          Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id
          tempor vulputate, nisi justo cursus justo, pellentesque condimentum
          diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis
          parturient montes, nascetur ridiculus mus. In placerat tellus a
          posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium
          in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque
          orci aliquam. Vestibulum elementum posuere vehicula.
        </p>
        <p>
          Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id
          arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum,
          erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu
          rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum
          consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum.
          Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero.
          Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus
          tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus
          lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat
          tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit
          venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium
          scelerisque.
        </p>
      </div>
    </div>
    <div class="swiper-scrollbar"></div>
    <!-- 竖直滑动，就像阅读文档一样 -->
  </div>
</template>
<script>
import Swiper from "swiper/swiper-bundle.min.js";
import "swiper/swiper-bundle.min.css";
export default {
  components: {},
  methods: {},
  mounted() {
    this.$nextTick(() => {
      // 创建swiper对象
      const swiper = new Swiper(".mySwiper", {
        direction: "vertical", // 控制滑动的方向，可设置为水平方向切换(horizontal)或垂直方向切换(vertical)。
        slidesPerView: "auto", // 允许滚动容器同时显示
        freeMode: true, // 开启这个就会有惯性滚动swiper-slide数量
        scrollbar: {
          el: ".swiper-scrollbar", // 增加滚动条
        },
        mousewheel: true,
      });
    });
  },
};
</script>

<style lang="scss" scoped>
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;
}

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

body {
  background: #fff;
}

.swiper {
  width: 100%;
  height: 500px;
}

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