슬릭 : 무한히 반복하는 법?

총 4 개의 이미지가 있으며 모두 화면에 표시됩니다. 내가 원했던 것은 사용자가 다음 버튼을 클릭하면 4 번째 이미지를 1 등분으로 표시하고 이전 1 번째 이미지는 2 번째 등으로 표시합니다. 슬릭 : 무한히 반복하는 법?

이

내 JS 코드의 일부입니다 :

infinite: true, 
    slidesToShow: 4, 
    slidesToScroll: 1,

무한 true로 설정되어 있지만, 총 5 개 미만의 이미지가있는 경우 내가 원하는 방식으로 작동하지 않습니다.

나는 여기에서 답을 찾고 두 가지 유사한 질문을 찾을 수 있었지만 둘 다 적절한 대답이 없었습니다. 링크 : How to make slick carousel images repeat infinitely 및 how could i make slides infinite (slick slider).

출처

2017-03-29 Rachel Nicolas

어떻게 작동합니까? 당신의 코드 조각으로 괜찮을 것 같습니다 ... – hering

5 개 이상의 이미지를 가지고 있지만 4 개만 필요하면 @hering이 무한히 작동합니다 –

@RachelNicolas 코드가 괜찮을 것 같습니다. 게시 할 수 있습니까? 나머지 코드 또는 공유 jsfiddle? 누구나 쉽게 답변을 줄 수 있습니다. – azs06

이 코드가 작동하지 않는 이유는 여기에 설명되어 있지 않지만 여기서는 핫픽스입니다!

당신은 된 이미지의 집합을 복제 할 수 있습니다, 그래서 어디 한 번했다 :

ABCD

당신은 지금이 :

ABCDABCD

이 의지 이제 원하는대로 무한 루프를 반복합니다.

출처

2017-03-29 15:10:41

흠,이 문제는 완전히 수정되었지만 불행히도 내 경우에는 해결책이 될 수 없습니다. –

rachel nicolas .. 당신은 이것을 시도하고 그것에 대해 배울 수 있습니다. 나는 약 2 개월 전 매끄러운 회전 목마를 연구했다.

$(document).ready(function() { 
 
    $('.sliderman').slick({ 
 
    infinite: true, 
 
    dots: true, 
 
    slidesToShow: 4, 
 
    slidesToScroll: 1, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
    }); 
 
});

body { 
 
    background-color: gray; 
 
    padding: 25px; 
 
} 
 

 
.box { 
 
    border-style: solid; 
 
    border-color: white; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Slick Carousel</title> 
 
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="sliderman" style="width: 600px;"> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/camry-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/sienna-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/corolla-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/yarisia-front.png" width="100px" height="100px"></div> 
 
    <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/corolla-front.png" width="100px" height="100px"></div> 
 
    </div> 
 

 

 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
</body> 
 

 
</html>

출처

2017-03-29 16:11:53

나는 이미이 기능을 갖추고 있습니다. 당신은 5 가지 요소를 가지고 있으며 한 번에 4 가지를 보여줍니다. 이건 내가 찾는 것이 아니야. –

슬릭 : 무한히 반복하는 법?

답변

관련 문제