主页 / 问题 / 717112
Accepted
Alexey_Danilov
Asked:2020-09-11 23:28:21 +0000 UTC2020-09-11 23:28:21 +0000 UTC

基于屏幕宽度的滑块初始化

  • 772

这是编译后的代码：

<section class="assortiment">
    <div class="container">
      <div class="h-img">
        <h2 class="h2 h2--size11">Собери набор со своими любимыми сладостями</h2>
        <div class="img_wrap"><img src="../img/box-up.png" alt="" class="box-up"><img src="../img/box-down.png" alt="" class="box-down"></div>
      </div><a href="#" class="btn--big btn--white btn--black-text btn--big--position-2">Собрать свой набор</a>
      <div class="assortiment-slider">
        <div class="assortiment-slider__next"><img src="img/mobile/right-arrow-mobile.png" alt=""></div>
        <div class="assortiment-slider__prev"><img src="img/mobile/left-arrow-mobile.png" alt=""></div>
        <div class="swiper-container swiper-container-assortiment">
          <div class="swiper-wrapper assortiment__list">
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Турин</a><img src="img/as-list/turin.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">        
              <div class="assortiment__top"><a href="#" class="assortiment__name">Мятный</a><img src="img/as-list/mint.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Семечки</a><img src="img/as-list/seeds.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Пур пур</a><img src="img/as-list/pur-pur.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Мрамор</a><img src="img/as-list/marble.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Банан</a><img src="img/as-list/banana.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Мускатный</a><img src="img/as-list/muskat.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">К кофе</a><img src="img/as-list/to_coffee.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Трюфель</a><img src="img/as-list/truffle.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис                                    </p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Ореховый</a><img src="img/as-list/nut.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис</p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Орандж</a><img src="img/as-list/orange.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис</p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">        
              <div class="assortiment__top"><a href="#" class="assortiment__name">Грецкий мак</a><img src="img/as-list/poppy.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис</p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Золотой</a><img src="img/as-list/gold.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис</p>
              </div>
            </div>
            <div class="swiper-slide assortiment__item">
              <div class="assortiment__top"><a href="#" class="assortiment__name">Миндаль</a><img src="img/as-list/almond.png" alt=""></div>
              <div class="assortiment__info">
                <h5 class="ingredients">Состав</h5>
                <p class="assortiment__desc">чернослив, финики, какао, миндальный экстракт, кешью, дробленный арахис</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


        .assortiment {
        background-image: url("../img/assortiment-bg.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%; }

    .btn--big--position-2 {
        position: absolute;
        top: 280px;
        left: 155px; }


    .btn--white {
        background-color: #FFF;
        border: 2px solid #fece33;
        z-index: 5; }


    .h-img {
        width: 100%;
        display: flex;
        justify-content: space-around;
        position: relative;
        padding-top: 45px; }


    .img_wrap {
        position: relative;
        right: 110px;
        bottom: 85px; }

    .h2--size11 {
        max-width: 370px;
        line-height: 50px; }


    .box-up {
        position: relative;
        top: 90px;
        right: -20px;
        z-index: 1; }

    .box-down {
        position: absolute;
        z-index: 0;
        top: 147px;
        right: -130px; }



    .assortiment__name {
        display: inline-block;
        text-align: center;
        color: #000000;
        font-family: Merriweather;
        font-size: 16px;
        font-style: italic;
        line-height: 1.2;
        margin-bottom: 10px;
        border-bottom: 1px solid #fecb2e;
        transition: border-color .25s linear; }

    .assortiment__list {
        display: flex;
        flex-wrap: wrap;
        background-color: #FFF;
        padding: 55px;
        align-items: center; }

    .assortiment__item {
        //width: 14.28%
        width: 13%;
        position: relative;
        margin-bottom: 40px;
        &::before {
            content: '';
            position: absolute;
            top: -25px;
            left: 0;
            width: 100%;
            height: 338px;
            transform: scaleX(1.2);
            background-color: #FFF;
            box-shadow: 0 0 81px 9px rgba(53, 51, 47, 0.3);
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s linear; }

        &:hover {
            &::before {
                opacity: 1;
                z-index: 3; }

            .assortiment__top {
                z-index: 4; }

            .assortiment__info {
                opacity: 1;
                pointer-events: auto; }

            .assortiment__name {
                border-color: rgba(255,255,255,0); } } }

    .assortiment__top {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2; }

    .assortiment__info {
        position: relative;
        z-index: 4;
        transition: opacity .25s linear;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        bottom: 0;
        transform: translateY(100%);
        left: 0;
        width: 100%; }


    .ingredients {
        color: #000000;
        font-family: "GothaProReg";
        font-size: 14px;
        font-weight: 700;
        line-height: 40px; }

    .assortiment__desc {
        color: #000000;
        font-family: "GothaProReg";
        font-size: 14px;
        font-weight: 400;
        line-height: 20px; }
javascript

2 个回答

  1. Best Answer

    我不太了解屏幕宽度的错误定义，试试这个，如果我理解正确，它应该可以工作：

    $(() => {
  let swiper, isActive;
  const $window = $(window);

  swiperFunc();
  $window.on('resize', swiperFunc);

  function swiperFunc() {
    const initNeeded = $window.width() > 1000;

    isActive = isActive !== undefined ? isActive : !initNeeded;

    if(initNeeded && !isActive) {
      swiper = new Swiper('.swiper-container-assortiment', {
        nextButton: '.assortiment-slider__next',
        prevButton: '.assortiment-slider__prev',
        slidesPerView: 3,
        slidesPerColumn: 2,
        spaceBetween: 30,
        centeredSlides: true,
      });
      isActive = true;
    }
    if(!initNeeded && isActive) {
      swiper.destroy(true, true);
      isActive = false;
    }
  }
});
    • 2

  2. 盒子有这样一个属性allowTouchMove——它负责幻灯片的移动。

    breakpoints: {
        320: {
            slidesPerView: 1,
            spaceBetween: 0,
            allowTouchMove:true,
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 20,
            allowTouchMove:false,
        }
    • 1

相关问题