답변 2개
8개월 전
1. controls 옵션 추가:
</p>
<p>javascript</p>
<p> $('.slider').slick({</p>
<p> controls: true,</p>
<p> ...</p>
<p> </p>
<p>});</p>
<p>
2. CSS에서 비디오 controls 스타일 지정:
css
</p>
<p>.slick-slider .slick-video-controls {</p>
<p> display: flex;</p>
<p> align-items: center;</p>
<p> justify-content: center;</p>
<p> position: absolute;</p>
<p> top: 50%;</p>
<p> left: 50%;</p>
<p> transform: translate(-50%, -50%);</p>
<p>}</p>
<p>
3. HTML에서 비디오 controls 추가:
html
</p>
<p><div class="slick-video-controls"></p>
<p> <button class="slick-prev">이전</button></p>
<p> <button class="slick-next">다음</button></p>
<p></div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
그누보드초보이용자
8개월 전
이건 다른거 같습니다 ㅠㅠ 비디오 옵션이라서요..
댓글을 작성하려면 로그인이 필요합니다.
8개월 전
Slick의 초기화 이후에 <video> 태그에 controls 속성을 강제로 추가하거나,
slick-slide가 활성화될 때 controls를 추가하는 이벤트 핸들러를 설정해야 합니다.
예를 들어, afterChange 이벤트를 활용하여
활성화된 슬라이드의 <video> 요소에 controls 속성을 추가하면 해결될 가능성이 큽니다.
jQuery 코드로 구현할 수 있을 것입니다.
$('.slider').on('init', function() {
$('.slick-slide video').attr('controls', 'controls');
});
$('.slider').slick();
Slick이 초기화된 후
비디오에 controls 속성을 직접 추가하는 것이 가장 적절한 방법입니다.
-구글링했습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
그누보드초보이용자
8개월 전
이방법도 안되네요 ㅜㅜ
g
glitter0gim
8개월 전
비디오 컨트롤이 사라지는 주요 원인은 slick-slide의 overflow: hidden 속성 때문,
여러 방안 중에, 가장 간단하고 확실한 해결 방법은 CSS에서 overflow: visible을 설정하는 것.
.slick-slide {
overflow: visible !important;
}
- 추가적인 JavaScript 수정 없이 ~
여러 방안 중에, 가장 간단하고 확실한 해결 방법은 CSS에서 overflow: visible을 설정하는 것.
.slick-slide {
overflow: visible !important;
}
- 추가적인 JavaScript 수정 없이 ~
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인