<  rel=\"stylesheet\" type=\"text/css\" href=\"https://www.swiper.com.cn/dist/css/swiper.min.css\">

body {
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            padding-top: 10px;
            padding-bottom: 30px;
        }
        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 240px;
            height: 320px;

        }
		.swiper-slide img{
			width: 100%;
			height: 100%;
		}
<div class=\"swiper-container\">
        <div class=\"swiper-wrapper\">
            <div class=\"swiper-slide\">
                <img src=\"http://www.yuetuvip.com/img/banner4.jpg\" >
            </div>
            <div class=\"swiper-slide\">
            	<img src=\"http://www.yuetuvip.com/img/banner4.jpg\" >
            </div>
            <div class=\"swiper-slide\">
            	<img src=\"http://www.yuetuvip.com/img/banner4.jpg\" >
            </div>
            <div class=\"swiper-slide\">
            	<img src=\"http://www.yuetuvip.com/img/banner4.jpg\" >
            </div>

        </div>
    </div>
<  src=\"https://www.swiper.com.cn/dist/js/swiper.min.js\"></ >
    <  type=\"text/ \">
        	var mySwiper = new Swiper(\'.swiper-container\', {
        	effect: \'coverflow\', //3d滑动
        	grabCursor: true,
        	centeredSlides: true,
        	slidesPerView: \'auto\',
        	loop:true,
        	slidesPerView: 2,
        	coverflow: {
        		rotate: 0,  //设置为0
        		stretch: 0,
        		depth: 200,
        		modifier: 2,
        		slideShadows : true
        	}   
        });
    </ >

欢迎讨论!!~~~

收藏 打印