swiper 中间整张图两边各显示一半


---------------------------------html-----------------------------------

<div class="swiper-container stu" id="asd">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="scre02-slide">
							<h3>1</h3>
							<img src="images/stu-02.png">
							<span></span>
							<p>考试倒计时及学习记录等 根据时间安排学习进度</p>
						</div>
					</div>	
					<div class="swiper-slide">
						<div class="scre02-slide">
							<h3>2</h3>
							<img src="images/stu-02.png">
							<span></span>
							<p>考试倒计时及学习记录等 根据时间安排学习进度</p>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="scre02-slide">
							<h3>3</h3>
							<img src="images/stu-02.png">
							<span></span>
							<p>考试倒计时及学习记录等 根据时间安排学习进度</p>
						</div>
					</div>
				</div>
			</div>

  ---------------------------------css-----------------------------------

.swiper-slide{width: 160px;}

  ---------------------------------js-----------------------------------

var mySwiper = new Swiper('.stu', {
				direction: 'horizontal',
                loop: true,
                autoplay: 1000,
                slidesPerView: "auto",
                centeredSlides:true,
                spaceBetween: 20,
				onSlideChangeStart: function (swiper) {
					var slides = swiper.slides;
                    for (var i = 0; i < slides.length; i++) {
						var src = slides.eq(i).children('.scre02-slide').children('img').attr('src');
                        if (slides.eq(i).attr('class').indexOf('swiper-slide-active') > -1) {
							slides.eq(i).children('.scre02-slide').addClass('scre02-slide_hover');
                            if (src.indexOf('_hover') == -1) {
								src = src.split('.png')[0];
								slides.eq(i).children('.scre02-slide').children('img').attr('src', src + "_hover.png");
                            }
                        } else {
							slides.eq(i).children('.scre02-slide').removeClass('scre02-slide_hover')
							
							//console.log(2)
                            if (src.indexOf('_hover') > -1) {
                                src = src.split('_hover.png')[0];
								slides.eq(i).children('.scre02-slide').children('img').attr('src', src + ".png");
                            }
                        }
                    }
                },

			});
			$(".stu").mouseenter(function() {
				mySwiper.stopAutoplay();
			}).mouseleave(function() {
				mySwiper.startAutoplay();
			});

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM