swiper 两边叠加轮播图特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 40 14



特效描述:两边叠加轮播图。基于swiper的两边叠加,渐渐缩小的轮播图,支持移动端

代码结构

1. 引入CSS

<link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">

2. 引入JS

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>

3. HTML代码

		<h2>两边渐小的轮播图-拖拽轮播切换</h2>
        <div class="swiper-container" id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/t1.png" alt="轮播图">
                </div>
                <div class="swiper-slide">
                    <img src="img/t2.png" alt="轮播图">
                </div>
                <div class="swiper-slide">
                    <img src="img/t3.png" alt="轮播图">
                </div>
                <div class="swiper-slide">
                    <img src="img/t4.png" alt="轮播图">
                </div>
                <div class="swiper-slide">
                    <img src="img/t5.png" alt="轮播图">
                </div>
            </div>
        </div>
        <div class="swiper-pagination banner_page"></div>
        <!--<script src="js/jquery.min.js"></script>-->
		<!--<script src="js/swiper.min.js"></script>-->
		<script type="text/javascript">
			$(function(){
				var mySwiper = new Swiper("#banner",{
					loop: true,
					loopedSlides: 5,
				    slidesPerView: 'auto',
				    autoplay: true,
				    centeredSlides:true,
				    initialSlide :2,
				    watchSlidesProgress: true,
				    pagination: {
                        el: '.banner_page',
                        clickable :true,
                    },
                    on: {
                        progress: function(progress) {
                            for (i = 0; i < this.slides.length; i++) {
                                var slide = this.slides.eq(i);
                                var slideProgress = this.slides[i].progress;
                                if (Math.abs(slideProgress) > 1) {
                                    var modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
                                }
                                translate = slideProgress * modify * 318 + 'px';
                                scale = 1 - Math.abs(slideProgress) / 5;
                                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                                slide.css('zIndex', zIndex);
                                slide.css('opacity', 1);
                                if (Math.abs(slideProgress) > 3) {
                                    slide.css('opacity', 0);
                                }
                            }
                        },
                        setTransition: function(transition) {
                            for (var i = 0; i < this.slides.length; i++) {
                                var slide = this.slides.eq(i)
                                slide.transition(transition);
                            }
                        }
                    }
				})
			})
		</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到