Dean.Koo
222
2017-09-26 12:50:37
2
4300

swiper slide 고수님들 답변 부탁드립니다. 제발 부탁드립니다2



무한루프를 설정해놨습니다 loop = true

제가 사용하는 슬라이드는 총 세개입니다.

이 세개가 무한루프 설정을 해놓으면 위에 그림처럼 보이게 됩니다.

제가 x표시 한 슬라이드를 안보이게 하고싶습니다.


코드는 이렇습니다.

<link rel="stylesheet" href="/css/swiper.min.css">

    <!-- Demo styles -->
     <style>
   /*  body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    } */
    .swiper-container {
        width:1020px;
        margin:0 auto;
        padding-bottom: 50px;
        overflow:visible;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover; 
        width: 281px;
        height: 655px;
		align-items: center;
    }
    .swiper-slide-active {
        background-position: center;
        background-size: cover; 
        width: 435px;
        height: 655px;
		align-items: center;
		transform:translate3d(-75px, 0px, 0px) !important;
    }
	.swiper-slide.swiper-slide-prev{
	transform:translate3d(-80px, 0px, 0px) rotateY(0deg) !important;}
	
	.swiper-slide.swiper-slide-next{
	transform:translate3d(-50px, 0px, 0px) rotateY(0deg) !important;} 
	
    </style> 
   
   
   
   
   
   
   
   
   <!-- <div class="swiper-pagination"></div> -->
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" >
            <li id="slide1">슬라이드1</li>
            </div>
            
            
            
            
            
            
            
            
            
            
            
            
            <div class="swiper-slide" ><li id="slide2">슬라이드2		
					</li></div>
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
    <div class="swiper-slide" ><li id="slide3">슬라이드3</li></div>
            
            
            
            
            
            
          
        </div>
        <!-- Add Pagination -->
       <div class="swiper-pagination"></div> 
    </div>
     <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    
    
    
    
    
    
    
    
    </ul>
				</div>
			</div>
			
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    <!-- Swiper JS -->
    <script src="/js/swiper.min.js"></script> 

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        centeredSlides: true, 
        effect: 'coverflow',
        initialSlide: 1,
        grabCursor: true,
        centeredSlides: true,
        //slidesPerView: 1,
        slidesPerView: 'auto',
        loop : true,
        //loopedSlides: 0,
        //loopAdditionalSlides: 0,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        coverflow: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : false
        }
    });


0
0
  • 답변 2

  • Dean.Koo
    222
    2017-09-26 12:54:43

    참고로 slidesPerView도 써봤으나 마찬가지입니다.

    loop가 먹히는 순간 저렇게 됩니다.

    0
  • lIlIIlIlIlIlI
    139
    2017-09-26 14:02:37
    안써봐서 모르겠지만 만약 옵션이 없다면 js 파일 까서 수정하시는수밖에 없으실텐데..
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.