lizuxiao
/
yzts


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="../swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      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: 100%;
      }

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

  <body>
    <!-- Swiper -->
    <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>

    <!-- Swiper JS -->
    <script src="../swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        mousewheel: true,
      });
    </script>
  </body>
</html>