미끄러운 회전목마 - 슬라이드의 높이를 같게 합니다.
슬라이드가 여러 개 있는 Slick carusel JS 플러그인에 문제가 있습니다.높이가 다른 것을 보여줍니다.
슬라이드의 높이가 동일해야 하는데, CSS 플렉스 박스에서는 슬라이드의 CSS 정의가 충돌하기 때문에 작동하지 않습니다.
또한, 저는 포럼과 웹에서 유용한 것을 찾지 못했습니다.
HTML
<div class="slider">
<div class="slide">
<p>Lorem ipsum.</p>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</div>
<div class="slide">
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
제이에스
$('.slider')
.slick({
autoplay: false,
dots: false,
infinite: false,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
rows: 0
});
CSS
.slide {
height: 100%;
background-color: #ccc;
padding: 10px;
}
몇 가지 CSS 스타일을 추가하면 준비됩니다.
.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}
맛있게 드세요! :-)
네, 여러분, 저는 쉬운 해결책을 찾았습니다.슬라이드 높이를 슬라이더 높이(슬라이드 트랙)로 설정하는 setPosition 콜백 기능(위치/크기 변경 후 발사)을 추가하기만 하면 됩니다.
제이에스
$('.slider').slick({
autoplay: false,
dots: false,
infinite: false,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
rows: 0
})
.on('setPosition', function (event, slick) {
slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});
슬라이드의 높이는 최대여야 합니다.
CSS
.slide {
height: 100%;
}
다음은 시연할 작은 jsFiddle입니다. https://jsfiddle.net/JJaun/o29a4q45/
@JJaun의 js 솔루션은 완벽하지 않습니다. 슬라이드에 배경 이미지를 사용하면 높이가 점프하는 것을 볼 수 있기 때문입니다.이것은 저에게 효과가 있었습니다.
.slick-track {
display: flex !important;
}
.slick-slide {
height: auto;
}
위에 답변한 바와 같이.매끄러운 슬라이더에서 잘 작동합니다.
.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}
하지만, 저는 매끄러운 동기화 내비게이션을 사용할 때 문제가 있습니다.
그것을 커버하기 위해 css 아래에 간단히 놓으십시오.
.slick-slide {
margin-bottom: 0;
object-fit: cover;
}
다음은 SCSS 전용 솔루션입니다.
.slick {
.slick-track {
display: flex;
.slick-slide {
display: flex;
height: auto;
img {
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
}
.slick-track { display: flex; align-items: stretch; }.slick-slide { height: auto; flex: 1; }마지막 요소를 블록의 맨 아래에 붙이려면 다음을 추가합니다.
display: flex포장지와margin-top: auto;끝까지
순수 CSS에 대한 솔루션
.slick-track {
display: flex;
}
.slick-track .slick-slide {
display: flex;
height: auto;
}
.slick-slide img {
height: 100%;
object-fit: contain;
object-position: center;
}다른 CSS 전용 솔루션이 있습니다.다음을 사용하여 부동 요소를 재정의할 수 있습니다.table/table-cell.
$(function() {
$('.slider')
.slick({
autoplay: false,
dots: false,
infinite: false,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
rows: 0
});
}).slide {
background-color: #ccc;
padding: 10px;
display: table-cell !important;
float: none !important;
}
.slick-track {
display: table !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider">
<div class="slide">
<p>Lorem ipsum.</p>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</div>
<div class="slide">
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>이후 검색의 경우:
다음을 간단히 사용할 수 있습니다.
$('.slick').slick({
/* your config */
}).on('setPosition', function (event, slick) {
slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});
저는 조금 더 깔끔해 보이기 위해 다른 이미지 높이의 갤러리를 만들기 위해 빠른 JS 해킹을 썼습니다.
다음 작업을 수행합니다.
- 슬라이더 인스턴스 가져오기
- 높이를 확인합니다. 이미지 높이가 설정됩니다.
- 각 이미지에 대한 srcatr을 가져와서 숨깁니다.
srcatr을 일부 CSS와 함께 배경 이미지로 이미지의 부모로 설정합니다.
function equalizeImagesHeight(slider) { const slides = slider.find('.slick-slide'); const imgHeight = $(slider)[0].clientHeight; slides.each(function(slide){ const src = $(this).find('img').hide().attr('src'); $(this).css({ backgroundImage:'url('+src+')', minHeight: imgHeight, backgroundSize: "cover", backgroundPosition: "center" }); }); };평준화시키다이미지 높이($('my-slider');
2021년 최신 버전의 슬릭을 가진 나를 위해 추가 디브로 내 아이템을 포장합니다.
그래서 나는 합니다.
.slick-track
{
display: flex !important;
height: 100%;
}
.slick-slide
{
height: auto;
.slick-slide> div
{
height: 100%;
.myItemClass
{
height: 100%;
}
}
}
위의 제안들은 저에게 효과가 없었습니다.슬라이더 이미지는 실제 세로이지만 가로 세로 비율이 다를 수 있습니다.저는 js를 이용해서 고쳤습니다.그래도 기분이 안 좋아요, 좀 더 깨끗한 걸 찾았으면 좋겠어요.
$carousel.on('setPosition', function (event, slick) {
const $slideImages = slick.$slideTrack.find('.slick-slide-img');
if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;
$slideImages.height('auto');
$slideImages.width('100%');
const imgHeights = $slideImages.map(function(){
return this.clientHeight;
}).get();
const maxHeight = Math.max.apply(null, imgHeights);
$slideImages.height(maxHeight);
$slideImages.width('auto');
}
나는 그것을 사용해야 했습니다.setPosition비록 코드가 한 번만 실행되면 되지만, 슬릭을 초기화한 후에.init이벤트가 작동하지 않는 이유는 해당 이벤트의 이미지 높이가 너무 낮기 때문입니다.두이벤트에 . 따라서 setPosition은 다음과 같습니다.if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;.
다음은 슬라이드 높이를 동일하게 만드는 jQuery 접근 방식입니다.
$('.slick-elem').on('init reInit', function(event, slick, currentSlide, nextSlide) {
setSlidesHeight(event);
});
function setSlidesHeight(event) {
let $ = jQuery;
let slickEl = $(event.target);
let slidesEl = slickEl.find('.slick-slide');
let maxHeight = -1;
slidesEl.each(function(index, el) {
maxHeight = maxHeight > $(el).height() ? maxHeight : $(el).height();
});
slidesEl.each(function(index, el) {
$(el).height(maxHeight);
});
}
언급URL : https://stackoverflow.com/questions/49028877/slick-carousel-force-slides-to-have-the-same-height
'programing' 카테고리의 다른 글
| 자바스크립트(jquery)가 있는 정수 값을 문자열을 반환하는 값에 추가하려면 어떻게 해야 합니까? (0) | 2023.08.26 |
|---|---|
| 파워셸의 열에서 개별 항목 선택 (0) | 2023.08.26 |
| 스프링 데이터 MongoDB 날짜 간격 (0) | 2023.08.26 |
| pytest -n auto + mariadb + m1 mac 너무 느림 (0) | 2023.08.26 |
| jQuery DataTables의 특정 열에 대해 정렬 사용 안 함 (0) | 2023.08.26 |