jquery 为什么Slick Slider会将我的图像放大到数十万像素?

3okqufwl  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(105)

在下面的片段中,我无法复制我网站上的问题。但是,我可以说我已经将问题缩小到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>
zaqlnxep

zaqlnxep1#

这不是一个明确的解决方案,但我有一个光滑的旋转木马,是数百万像素宽。最终,这是因为它在一个定义不好的flexbox中。一旦我关掉了Flex,它就恢复正常了。

相关问题