Задать вопрос

Anonimmus

Ответы пользователя по тегу Swiper

  • Как отключить скролл последнего swiper элемента?

    @Anonimmus Автор вопроса
    Гыы, сам спросил сам ответил немого позже))

    решение:
    mousewheel: {
    invert: false,
    eventsTarget: ".swiper-slide:not(.no-swipe)",
    },
    Ответ написан
    Комментировать
    Комментировать

  • Как в Swiper слайдере настроить внешний вид пагинации?

    @Anonimmus
    затем когда появится контект у вас появится новая головная боль как убрать 0.
    решение у меня такое 

    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
        formatFractionCurrent: addZero,
        formatFractionTotal: addZero
      },

//где нить ниже 

    function addZero(num){
      return (num > 9) ? num : '0' + num;
    }
    Ответ написан
    Комментировать
    Комментировать

  • Как это починить Бутстрап 4 табы + swiper?

    @Anonimmus Автор вопроса
    Рустам Байназаров,
    Спасибо, заработало лишь через api
    updateOnWindowResize: true,
    observer: true,
    observeParents: true,
    Ответ написан
    2 комментария
    2 комментария

  • Как настроить автоширину слайдов с Swiper Js?

    @Anonimmus
    Юзай slidesPerView: 'auto', и в css задавай ширину блоков, слайдер автоматически подстроится под размеры
    <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">

                <div class="swiper-slide infoPost">
                    <div class="infoText">
                        <h2>Коллекция авторских коробок</h2>
                        <p>Бесплатная доставка по городу Воронеж от 2000 рублей</p>
                        <a href="">Купить</a>
                    </div>
                </div>

                <div class="swiper-slide imgPost1"> </div>



                <div class="swiper-slide infoPost">
                 <div class="infoText">
                    <h2>Коллекция авторских коробок</h2>
                    <p>Бесплатная доставка за город от 3999 рублей</p>
                    <a href="">Купить</a>
                </div>
            </div>

            <div class="swiper-slide imgPost2"> </div>




            
        <div class="swiper-slide infoPost">
             <div class="infoText">
                <h2>Коллекция авторских коробок</h2>
                <p>Бесплатная доставка по городу от 1700 рублей</p>
                <a href="">Купить</a>
            </div>
        </div>

        <div class="swiper-slide imgPost3"> </div>


    </div>
    <!-- Add Arrows -->
    <div class="btns">
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

<script src="js/slider.js"></script>

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 2,
      spaceBetween: 0,
      // init: false,
     loop: true,
     slidesPerGroup: 2,
  
    autoplay: {
        delay: 7000,
        disableOnInteraction: false
    },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
       pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        300: {
   <b>       slidesPerView: 'auto',</b> 
          spaceBetween: 0,
        },
        768: {
          slidesPerView: 'auto',
          spaceBetween: 0,
        },
        1024: {
          slidesPerView: 'auto',
          spaceBetween: 0,
        },

      }
    });


    .infoPost {
  width: 1165px;
  height: auto;
  margin-left: -150px;
  background: url("../img/bac-slider.png") no-repeat;
  mix-blend-mode: multiply;
  background-position: top center;
}

.imgPost1 {
  width: 750px;
}

.imgPost2 {
  width: 750px;
}

.imgPost3 {
  width: 750px;
}
    Ответ написан
    2 комментария
    2 комментария