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