#javascript #css #lightbox #swiper
Вопрос:
У меня проблема, мой английский не очень хорош, но я стараюсь полностью описать проблему, с которой столкнулся~
В настоящее время я использую swiper и lightbox2 для создания эффектов карусели, и я до сих пор не знаю, неоднократно ли я просматриваю официальные документы. В чем проблема?
Всего есть три вопроса:
- Почему клавиши со стрелками Swiper не работают?
- Если вы хотите сохранить изображение в 16:9, существуют ли другие настройки, кроме установки ширины и высоты?
- Кроме того, почему мое направление? Ключ всегда находится посередине, а не в середине картинки?
Спасибо всем вам за то, что посмотрели мой вопрос. Я надеюсь, что вы сможете получить помощь. Еще раз спасибо вам за вашу помощь.
[
var swiper = new Swiper('.swiper-container', { direction: 'horizontal', slidesPerView: 1, spaceBetween: 4, breakpointsInverse: true, breakpoints: { //当宽度大于等于320 320: { slidesPerView: 2, spaceBetween: 10 }, //当宽度大于等于480 480: { slidesPerView: 3, spaceBetween: 20 }, //当宽度大于等于640 640: { slidesPerView: 3, spaceBetween:24 } } }) .swiper-slide img{ width: 375px; height: 275px; object-fit: cover; } @media(min-width:600px){ .swiper-slide img{ width: 240px; height: 135px; object-fit: cover; } } img{ width: 100%; } lt;script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"gt;lt;/scriptgt; lt;link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" rel="stylesheet"/gt; lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.9/swiper-bundle.css" rel="stylesheet"/gt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="demo"gt; lt;div class="swiper-container"gt; lt;div class="swiper-wrapper"gt; lt;div class="swiper-slide"gt; lt;a href="https://upload.cc/i1/2021/10/20/cO8Cbn.jpg" data-lightbox="banner1" data-title="1"gt; lt;img src="https://upload.cc/i1/2021/10/20/cO8Cbn.jpg" alt=""gt; lt;/agt; lt;/divgt; lt;div class="swiper-slide"gt; lt;a href="https://upload.cc/i1/2021/10/20/1NYZ0y.jpg" data-lightbox="banner1" data-title="1"gt; lt;img src="https://upload.cc/i1/2021/10/20/1NYZ0y.jpg" alt=""gt; lt;/agt; lt;/divgt; lt;div class="swiper-slide"gt; lt;a href="https://upload.cc/i1/2021/10/22/xAOuwi.jpg" data-lightbox="banner1" data-title="1"gt; lt;img src="https://upload.cc/i1/2021/10/22/xAOuwi.jpg" alt=""gt; lt;/agt; lt;/divgt; lt;/divgt; lt;!-- 如果需要分页器 --gt; lt;div class="swiper-pagination"gt;lt;/divgt; lt;!-- 如果需要导航按钮 --gt; lt;div class="swiper-button-prev"gt;lt;/divgt; lt;div class="swiper-button-next"gt;lt;/divgt; lt;/divgt; lt;/divgt;