swiper内容滚动

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="swiper-4.1.6/dist/css/swiper.min.css">
    <script src="swiper-4.1.6/dist/js/swiper.min.js">script>

    <style>
        .swiper-container {
            width: 600px;
            height: 600px;
        }
        .swiper-slide{
            heigth:40px;
            line-height:40px;
        }
    style>

head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">孑影侧枕床木,寒思冻彻身骨。div>
        <div class="swiper-slide">拥衾难寐空屋,起衣温酒一壶。div>
        <div class="swiper-slide">北国夜无雪,念念藏纸雀。div>
        <div class="swiper-slide">枯守孤盏灯,清坐又一更。div>
        <div class="swiper-slide">昨冬初逢可忆,今朝苦等难遇。div>
        <div class="swiper-slide">去日欢颜几许?来年再会可期?div>
        <div class="swiper-slide">北国夜无雪,隐隐惧相逢。div>
        <div class="swiper-slide">宁负痴心某,独熬愚情种。div>
        <div class="swiper-slide">夕阳几缕染双眸,旧月一轮诉肠衷。div>
        <div class="swiper-slide">声色如彼化于风,形影似我遁无声。div>
        <div class="swiper-slide">北国夜无雪,隐隐惧相逢。div>
        <div class="swiper-slide">宁负痴心某,独熬愚情种。div>
        <div class="swiper-slide">夕阳几缕染双眸,旧月一轮诉肠衷。div>
        <div class="swiper-slide">声色如彼化于风,形影似我遁无声。div>
        <div class="swiper-slide">北国夜无雪,疏疏门前路。div>
        <div class="swiper-slide">子犹守岁烛,冷暖梦何苦。div>
    div>

    
    

    
    
    

    
    
div>

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        slidesPerView: 10, //同时显示数量 默认1
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },

        autoplay: {
            delay: 1000,//1秒切换一次
        },
    })
script>
body>
html>

 

转载于:https://www.cnblogs.com/mz0104/p/10237041.html

你可能感兴趣的:(swiper内容滚动)