인프런 커뮤니티 질문&답변

SH님의 프로필 이미지

작성한 질문수

반응형 웹사이트 포트폴리오(App Official Landing Website)

슬릭 슬라이더

24.09.05 18:56 작성

·

20

1

제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요..

제이쿼리에서 바꿀 방법 없을까요???

아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ

    /* product */
    $('.sales-presentation').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        dotsClass : "slick-dots", 	//아래 나오는 페이지네이션(점) css class 지정
				draggable : true, 	//드래그 가능 여부 
				
				responsive: [ // 반응형 웹 구현 옵션
					{  
						breakpoint: 960, //화면 사이즈 960px
						settings: {
							//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
							slidesToShow:3 
						} 
					},
					{ 
						breakpoint: 768, //화면 사이즈 768px
						settings: {	
							//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
							slidesToShow:2 
						} 
					}
				]

      });

답변 2

0

코딩웍스(Coding Works)님의 프로필 이미지

2024. 09. 05. 22:32

어떻게 뭘 바꾸시겠다는건지 질문 내용에서 알 수가 없네요.

breakpoint: 768, 이 부분에서 세팅해주시면 모바일에서 적용됩니다.

질문을 다시 상세히 해주세요.

0

인프런 AI 인턴님의 프로필 이미지

2024. 09. 05. 19:01

안녕하세요, 인프런 AI 인턴입니다.

질문하신 슬릭 슬라이더의 반응형 설정에 관한 부분에 대해, 비슷한 문제를 해결한 기존의 답변을 찾았습니다. 반응형 웹에서 슬릭 슬라이더를 사용할 때 responsive 옵션을 통해서 다른 화면 크기에 따라 다르게 설정하려는 시도는 올바른 접근입니다. 그러나 설정이 적용되지 않는 문제에 대해 몇 가지 고려해볼 점이 있습니다.

먼저, 설정하신 breakpointsettings 옵션들이 정상적으로 작동하지 않는 경우, 슬릭 슬라이더의 초기화 문제, 혹은 CSS/JS 파일 로딩 순서에 문제가 있을 수 있습니다. 또는, 슬릭 슬라이더를 적용할 HTML 구조가 예상과 다르게 설정되어 있거나, 다른 CSS/JS의 영향으로 인해 동작하지 않을 수 있습니다.

슬릭 슬라이더의 responsive 설정 관련하여, 이전에 공유된 슬라이드 질문에 달린 답변을 참고할 것을 추천드립니다. 해당 답변에서는 responsive 옵션을 사용해 화면 크기에 따른 슬라이더의 변화를 설정하는 방법에 대해 설명하고 있습니다. 특히, 설정한 breakpoint에 따라 슬라이드가 보여지는 갯수를 조정하는 방법을 보실 수 있습니다.

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: false
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }
      // 관련한 더 설정을 추가할 수 있습니다.
  ]
});

위 예제와 비슷하게 설정하되, 본인 프로젝트의 세부 사항에 맞게 조절해보시기 바랍니다. 추가적으로, 슬라이더가 예상대로 작동하지 않을 때는 슬릭 슬라이더를 적용하기 전후의 HTML 구조와, CSS/JS 파일이 올바르게 로드되었는지 확인해보세요.

질문하신 내용과 직접적으로 관련된 기존 답변을 제공하기는 어렵지만, 비슷한 문제를 다룬 기존 답변이 도움이 될 수 있습니다. 관련 내용을 참고하여 문제 해결에 도움이 되시길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

SH님의 프로필 이미지

작성한 질문수

질문하기