[javascript]slick 사용시 원하는 index 부터 슬라이드 시작하는 방법에 대하여 질문드립니다.

Question

안녕하십니까, 자바스크립트 공부 중 Slick을 사용하여 업로드 된 이미지를

슬라이드로 보여주게끔 구현해보던 중 생긴 궁금증에 대해 검색을 해봐도 해결이 되지않아

질문을 올려보게 되었습니다.

먼저 3개 까지의 이미지를 업로드하고, 해당 이미지 업로드 순서 상관없이 슬라이드 로드시

아래의 스샷의 div data-slick-index 0, 1, 2 중 항상 1의 이미지를

먼저 보여주게끔 하는 것이 저의 목적입니다.

구글에 검색시 slick goTo 혹은

function

var slideNo = $(this).index();

$('.slider-for').slick('slickGoTo', slideNo); 등의 방법으로 jquery를 적용해 봤지만 슬라이드는

항상 index = 0부터 시작되었습니다. slick css에 대해 알아보아도 index 지정에 대한 것은

찾지 못하였는데 혹시 해당 부분에 대해 시간 내주셔서 레퍼런스나 지식 나눠주시면 정말 감사드립니다.

karolus · Answer

슬릭에 initialSlide 라는 옵션을 줄수있습니다.

 $('.slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: true,   
      initialSlide : 1,
      infinite: true,
      prevArrow : $('.prev'),
      nextArrow : $('.next')}

);

위는 그냥 예시로 initialSlide 를 처음 호출할때 넣어보세요.

kiroki · Answer

1. slickGoTo는 1.4버전 부터 지원한다고 하니 slick.js의 버전을 확인해보셔야할 것 같구요.

2. slick을 사용할 선택자로 올바른 Element가 선택되는지 확인해야 하고요.

3. var slideNo = $(this).index(); 로 값을 가져 오시는데

doc에서는 int만 된다고 하니

slickGoTo

int : slide number, boolean: dont animate

Navigates to a slide by inde

혹시 int가 아니라 문자열로 값이 설정되는지 확인하셔야 하구요

생각나는건 이정도네요

[javascript]slick 사용시 원하는 index 부터 슬라이드 시작하는 방법에 대하여 질문드립니다.

2개의 답변

Q&A 목록