Slick Slider 图片尺寸大于屏幕

Question

我正在用灯箱制作光滑的滑块。 除了完整的浏览器屏幕尺寸外，一切都很好。 当我最大化浏览器屏幕尺寸时，整个内容在屏幕上更大并且看不到任何东西。 但是，当我像手机屏幕比例一样最小化浏览器屏幕尺寸时，它工作正常。 我发现了问题，但仍然找不到导致此屏幕尺寸问题的原因。

如果有人能帮我解决这个屏幕尺寸问题，我将不胜感激。

 $(document).ready(function() { $('.slider-thumbnails').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider', focusOnSelect: true }); $('.slider').slick({ infinite: false, lazyLoad: 'ondemand', asNavFor: '.slider-thumbnails', }); }); < script src = "https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity = "sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin = "anonymous" > < /script>

 body { font-family: Verdana, Geneva, Tahoma, sans-serif; background: #dedede; font-size: 14px; color: #333; line-height: 1.8; } .container { max-width: 900px; padding: 30px; background-color: #fff; margin-left: auto; margin-right: auto; border-radius: 10px; } header { text-align: center; margin-bottom: 30px; border-bottom: solid 3px #f5f5f5; } h1 { margin-top: 0; } .product { display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { .product { flex-direction: row; } .product-description { margin-left: 36px; } } /* Main Slider */ .slider { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border: solid 9px #fff; box-sizing: border-box; margin-bottom: 15px; border-radius: 5px; } .slider .slick-slide {} .slider .slick-slide img { width: 100%; } /* make button larger and change their positions */ .slick-prev, .slick-next { width: 50px; height: 50px; z-index: 1; } .slick-prev { left: 5px; } .slick-next { right: 5px; } .slick-prev:before, .slick-next:before { font-size: 40px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* General slick slider styling */ .slick-slide:focus, .slick-slide:focus { outline: none; /* remove default outline when on :focus */ } /* hide dots and arrow buttons when slider is not hovered */ .slick-slider:not(:hover) .slick-arrow, .slick-slider:not(:hover) .slick-dots { opacity: 0; } /* transition effects for opacity */ .slick-arrow { transition: opacity 0.5s ease-out; } @media only screen and (min-width: 768px) { product-images { width: 50%; } } /* Thumbnails Slider */ .slider-thumbnails { margin-left: -15px; margin-right: -15px; } .slider-thumbnails .slick-slide { padding: 15px; transition: transform 0.3s ease-out; } .slider-thumbnails .slick-slide:focus img { box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); } .slider-thumbnails .slick-slide img { max-width: 100%; border: solid 5px #fff; box-sizing: border-box; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.3s ease-out; border-radius: 3px; } /* Loading effects for main slider */ .slider { background: url(img/tail-spin.svg); background-repeat: no-repeat; background-position: center; background-size: 100px 100px; min-height: 100px; } .slider img.slick-loading { opacity: 0; } .slider img { transition: opacity 0.3s ease 0s; } .slider .slick-loading:after { content: 'loading' }

 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" /> <div class="container"> <header> <h1>Slick Slider</h1> </header> <div class="product"> <div class="product-images"> <div class="slider"> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Image 1"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Image 2"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Image 3"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Image 4"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Image 5"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Image 6"> </a> </div> </div> <div class="slider-thumbnails"> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Thumbnail 1"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Thumbnail 2"> </a> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Thumbnail 3"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Thumbnail 4"> </a> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Thumbnail 5"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Thumbnail 6"> </div> </div> </div> <div class="product-description"> <h2>Product Title</h2> <p> <strong>Price:</strong> Rp 120.000 <br /> <strong>Brand:</strong> Lorem Ipsum <br /> <strong>Weight:</strong> 2kg </p> <h3>Description</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </div> </div>

Answer 1

看起来问题是你的css , flex setting: flex-direction: row; 在这种情况下导致问题。

@media only screen and (min-width: 768px) {
  .product {
    /*flex-direction: row; --> THIS SEEMS TO CAUSE THE ISSUE */
  }
}

对于较大的屏幕，您仍然可以将其排成一行，但您必须为.product-images元素设置一个宽度，例如 50%。

 $(document).ready(function() { $('.slider-thumbnails').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider', focusOnSelect: true }); $('.slider').slick({ infinite: false, lazyLoad: 'ondemand', asNavFor: '.slider-thumbnails', }); });

 body { font-family: Verdana, Geneva, Tahoma, sans-serif; background: #dedede; font-size: 14px; color: #333; line-height: 1.8; } .container { max-width: 900px; padding: 30px; background-color: #fff; margin-left: auto; margin-right: auto; border-radius: 10px; } header { text-align: center; margin-bottom: 30px; border-bottom: solid 3px #f5f5f5; } h1 { margin-top: 0; } .product { display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { .product { /*flex-direction: row; --> THIS SEEMS TO CAUSE THE ISSUE */ flex-direction: row; } .product-description { margin-left: 36px; } .product-images { width: 50%; /* include a width value */ } } /* Main Slider */ .slider { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border: solid 9px #fff; box-sizing: border-box; margin-bottom: 15px; border-radius: 5px; } .slider .slick-slide {} .slider .slick-slide img { width: 100%; } /* make button larger and change their positions */ .slick-prev, .slick-next { width: 50px; height: 50px; z-index: 1; } .slick-prev { left: 5px; } .slick-next { right: 5px; } .slick-prev:before, .slick-next:before { font-size: 40px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* General slick slider styling */ .slick-slide:focus, .slick-slide:focus { outline: none; /* remove default outline when on :focus */ } /* hide dots and arrow buttons when slider is not hovered */ .slick-slider:not(:hover) .slick-arrow, .slick-slider:not(:hover) .slick-dots { opacity: 0; } /* transition effects for opacity */ .slick-arrow { transition: opacity 0.5s ease-out; } @media only screen and (min-width: 768px) { product-images { width: 50%; } } /* Thumbnails Slider */ .slider-thumbnails { margin-left: -15px; margin-right: -15px; } .slider-thumbnails .slick-slide { padding: 15px; transition: transform 0.3s ease-out; } .slider-thumbnails .slick-slide:focus img { box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); } .slider-thumbnails .slick-slide img { max-width: 100%; border: solid 5px #fff; box-sizing: border-box; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.3s ease-out; border-radius: 3px; } /* Loading effects for main slider */ .slider { background: url(img/tail-spin.svg); background-repeat: no-repeat; background-position: center; background-size: 100px 100px; min-height: 100px; } .slider img.slick-loading { opacity: 0; } .slider img { transition: opacity 0.3s ease 0s; } .slider .slick-loading:after { content: 'loading' }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" /> <div class="container"> <header> <h1>Slick Slider</h1> </header> <div class="product"> <div class="product-images"> <div class="slider"> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Image 1"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Image 2"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Image 3"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Image 4"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Image 5"> </a> </div> <div> <a href="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" data-lightbox="lightbox"> <img data-lazy="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Image 6"> </a> </div> </div> <div class="slider-thumbnails"> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3663057.jpg" alt="Thumbnail 1"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661267.jpg" alt="Thumbnail 2"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661194.jpg" alt="Thumbnail 3"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661227.jpg" alt="Thumbnail 4"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661259.jpg" alt="Thumbnail 5"> </div> <div> <img src="https://www.bayustudio.com/files/articles/slick3/demo1/img/pexels-cottonbro-3661265.jpg" alt="Thumbnail 6"> </div> </div> </div> <div class="product-description"> <h2>Product Title</h2> <p> <strong>Price:</strong> Rp 120.000 <br /> <strong>Brand:</strong> Lorem Ipsum <br /> <strong>Weight:</strong> 2kg </p> <h3>Description</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>