1

我正在尝试使用Swiper.js制作图像滑块，其中每张幻灯片都有自己的图像和文本（标题、文本和按钮）。图像的宽度和高度可变......我设法让它在全高清屏幕上看起来有点好，但是一旦我开始调整窗口大小或在较小的屏幕（手机，talbet，ipadPro）上查看页面，整个事情落在appart ...对于网页，我也在使用引导程序。

我遇到的问题：

  1. 第一个也是主要的问题是，尽管遵循了 Swiper.js 文档，但活动幻灯片没有居中......
  2. 第二个问题是图像没有缩小或调整大小，尽管使用了 img-fluid 引导类并且没有在它们上设置固定高度......
  3. 图像的动画很难而且跳跃......不确定这是否是正确的表达，但当你看到小提琴时你就会明白我的意思......
  4. 我已将显示图像的数量设置为 3，但是当我在更大的屏幕上查看页面时，全高清分辨率有超过 3 张幻灯片可见...

第二个和第四个问题可能是由于我将 css 中的幻灯片宽度设置为宽度：1280px...但是如果我不这样设置，那么幻灯片看起来不像我想要的...完全超越图像，而不是离开它......

我正在插入一张我希望它的外观和 js fiddle 的图片，以便您可以看到我的代码。

我想要的布局的图像在此处输入图像描述

JSfiddle：指向小提琴的链接

我的 HTML：

<section id="hero">
  <!-- Swiper -->
  <div class="main-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slider-image-holder">
          <div class="slider-image">
            <img src="//via.placeholder.com/960x723" alt="Picture1" class="img-fluid" />
          </div>
          <div class="slider-text-wrapper">
            <div class="slider-text-heading">
              <h1>
                our solution<br />for lorem ipsum
              </h1>
            </div>
            <div class="slider-text-paragraph">
              <p class="m-0">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
              </p>
            </div>
            <div class="slider-text-btn">
              <a href="" class="btn green-bg-btn">več</a>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slider-image-holder">
          <div class="slider-image">
            <img src="//via.placeholder.com/928x922" alt="picture2" class="img-fluid" />
          </div>
          <div class="slider-text-wrapper">
            <div class="slider-text-heading">
              <h1>
                latisimuss<br />lo ipsum
              </h1>
            </div>
            <div class="slider-text-paragraph">
              <p class="m-0">
                Sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat. Lorem
                ipsum dolor sit amet, consetetur sadipscing elitr.
              </p>
            </div>
            <div class="slider-text-btn">
              <a href="" class="btn green-bg-btn">več</a>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slider-image-holder">
          <div class="slider-image">
            <img src="//via.placeholder.com/952x946" alt="picture3" class="img-fluid" />
          </div>
          <div class="slider-text-wrapper">
            <div class="slider-text-heading">
              <h1>
                Lorem ipsum<br />dolor
              </h1>
            </div>
            <div class="slider-text-paragraph">
              <p class="m-0">
                ahsbdjh hasjdhjjh jahsdjh jha jshajhsdbhe absjhdbhh h ah hjh jhajh hj
              </p>
            </div>
            <div class="slider-text-btn">
              <a href="" class="btn green-bg-btn">več</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</section>

我的 SCSS：

$white: #FFFFFF;
$primary-green: #a6c522;
$grey: #999999;
$mate-balck: #222222;
$black: #000000;

#hero {
  padding-top: 177px;
  height: 100vh;
  .main-swiper {
    height: 100%;
    overflow: hidden !important;
  }
  .swiper-wrapper {
    transition: all .350s ease-in;
    .swiper-slide {
      transition: all .350s ease-in;
      &-active {
        width: 1280px !important;
        .slider-text-wrapper {
          display: unset !important;
        }
      }
      &-prev {
        .slider-image-holder {
          bottom: 50px !important;
        }
      }
      &-prev, &-next {
        transition: all .350s ease-in;
        width: 15% !important;
        .slider-image-holder {
          position: absolute !important;
          bottom: 0;
          .slider-image {
            img {
              transition: all .350s ease-in;
            }
          }
        }
      }
      .slider-image-holder {
        position: relative;
        .slider-image {
          text-align: right;
          img {
            transition: all .350s ease-in;
          }
        }
        .slider-text-wrapper {
          display: none;
          position: absolute;
          top: 70px;
          left: 70px;
          transition: all .280s ease-in;
          .slider-text-heading {
            padding-bottom: 12px;
            h1 {
              text-transform: uppercase;
              font-family: 'Anton', sans-serif;
              font-size: 80px;
              color: $black;
            }
          }
          .slider-text-paragraph {
            width: 40%;
            padding-bottom: 45px;
            p {
              color: $mate-balck;
              font-size: 1em;
            }
          }
          .slider-text-btn {
            .green-bg-btn {
              border-radius: 0;
              font-family: 'Anton', sans-serif;
              background-color: $primary-green;
              color: $black;
              text-decoration: none;
              text-transform: uppercase;
              font-size: 1.125em;
              text-align: center;
              padding: 10px 70px;
            }
          }
        }
      }
    }
  }
  .swiper-pagination {
    display: none;
  }
}

我的 JS：

$(document).ready(function() {
    var heroSwiper = new Swiper('.main-swiper', {
        slidesPerView: 3,
        spaceBetween: 30,
        speed:1000,
        centeredSlides: true,
        loop: true,
        loopFillGroupWithBlank: true,
        autoplay: {
            delay: 3500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
});
4

0 回答 0