在下面的片段中,我无法复制我网站上的问题。但是,我可以说我已经将问题缩小到Slick Slider。这个问题在我开始使用之前没有发生,当我删除这个特定的滑块时,这个问题就消失了。
问题是,我正在处理的页面上的许多图像正在增长到一些荒谬的高度。例如,在滑块中,有一张柯南奥布莱恩的照片。在我的网站上,图像的宽度超过123,000像素。
同样,我不能重复的问题,但如果你知道一个具体的问题,并与光滑滑块修复,我会很感激。
$('.slider').slick({
infinite: true,
speed: 800,
slidesToShow: 1
});
$('.left').click(function () {
$('.slider').slick('slickPrev');
});
$('.right').click(function () {
$('.slider').slick('slickNext');
});
.testimonial {
display: inline-flex;
flex-direction: column;
width: 100%;
/* slide animation */
}
.testimonial__slider {
margin-top: 2rem;
height: auto;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.testimonial .arrows {
display: flex;
margin-right: auto;
margin-top: 2rem;
}
@media (min-width: 768px) {
.testimonial .arrows {
margin-right: unset;
margin-left: auto;
margin-top: unset;
}
}
.testimonial__controls {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.testimonial__controls {
display: flex;
flex-direction: row;
align-items: center;
}
}
.testimonial__slider .testimonial__item.active, .testimonial__slider .testimonial__item.prev-item, .testimonial__slider .testimonial__item.next-item {
display: flex;
}
.testimonial__img {
min-width: 40%;
}
/* .testimonial__img img {
height: 100%;
} */
.testimonial__slider .testimonial__item {
/* height: 100%;
width: 100%; */
/* display: none; */
display: flex;
transition: transform 0.2s ease;
}
.testimonial__item {
background: #F2F5F9;
display: flex;
flex-direction: column;
transition: all 0.2s ease;
}
@media (min-width: 768px) {
.testimonial__item {
display: flex;
flex-direction: row;
max-height: 500px;
}
}
.testimonial__content {
display: flex;
flex-direction: column;
padding: 2.75rem 2.5rem 2.5rem;
justify-content: space-between;
}
.testimonial__credits {
display: flex;
flex-direction: column;
margin-top: 2rem;
border-left: 4px solid #005fec;
padding-left: 0.75rem;
}
.testimonial__name {
margin-bottom: 0.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="testimonial">
<div class="testimonial__slider">
<div class="testimonial__controls">
<h3>Lorem ipsum dolor sit amet.</h3>
<div class="arrows">
<span class="testimonial__slider-control-prev left" role="button">
<img aria-hidden="true" src="/assets/svg/arrow-left.svg" height="25" width="25"
alt="Previous Slide Button">
</span>
<span class="testimonial__slider-control-next right" role="button">
<img aria-hidden="true" src="/assets/svg/arrow-right.svg" height="25" width="25"
alt="Next Slide Button">
</span>
</div>
</div>
<div class="testimonial__items slider">
<div class="testimonial__item">
<div class="testimonial__img">
<img class="img-fluid"
src="https://nextivaweb.imgix.net/heroes/case-study/Case-Study-Conan-hero.jpg?w=336&h=412&auto=format&crop=focalpoint&fit=crop&fp-x=.75&fp-z=1.3&fp-y=.39"
alt="">
</div>
<div class="testimonial__content">
<div class="testimonial__text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium inventore odio sint aliquid, blanditiis officia quo ipsum tempore eligendi accusamus?</p>
</div>
<div class="testimonial__credits">
<span class="testimonial__name kicker kicker--bold">Chris Hayes</span>
<span class="testimonial__position kicker kicker--light">IT Director, The Conan O'Brien Show,
Burbank, CA</span>
</div>
</div>
</div>
<div class="testimonial__item">
<div class="testimonial__img">
<img class="img-fluid"
src="https://sandbox-uploads.imgix.net/u/1630477471-dd0cd5b16967417586c822d6dabcb995?w=336&h=412&auto=format"
alt="">
</div>
<div class="testimonial__content">
<div class="testimonial__text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium inventore odio sint aliquid, blanditiis officia quo ipsum tempore eligendi accusamus?</p>
</div>
<div class="testimonial__credits">
<span class="testimonial__name kicker kicker--bold">Rich Sparkman</span>
<span class="testimonial__position kicker kicker--light">Director of Technology, Shelby
America</span>
</div>
</div>
</div>
<div class="testimonial__item">
<div class="testimonial__img">
<img class="img-fluid"
src="https://sandbox-uploads.imgix.net/u/1630477587-e54d61f4eef5e36c72dccd1fc0463514?w=336&h=412&auto=format"
alt="">
</div>
<div class="testimonial__content">
<div class="testimonial__text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium inventore odio sint aliquid, blanditiis officia quo ipsum tempore eligendi accusamus?</p>
</div>
<div class="testimonial__credits">
<span class="testimonial__name kicker kicker--bold">Tia Aleksandrova</span>
<span class="testimonial__position kicker kicker--light">IT Director, The Conan O'Brien Show,
Burbank, CA</span>
</div>
</div>
</div>
</div>
</div>
</div>
1条答案
按热度按时间zaqlnxep1#
这不是一个明确的解决方案,但我有一个光滑的旋转木马,是数百万像素宽。最终,这是因为它在一个定义不好的flexbox中。一旦我关掉了Flex,它就恢复正常了。