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