Anonimmus

Question

Веб-разработка

Простой

Банальный вопрос — как быть дальше?

4 подписчика
более трёх лет назад
1774 просмотра

9

ответов

Answer 1 · 2020-11-15 07:04:33

Юзай 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;
}

Answer 2 · 2021-04-20 16:54:46

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

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

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

    function addZero(num){
      return (num > 9) ? num : '0' + num;
    }

Answer 3 · 2021-04-23 14:46:03

вот гайд - https://opttour.ru/plugins/razbiraem-woocommerce-n...

скопируйте шаблон из папки wp-content/plugins/woocommerce/templates в папку "ваша-тема/woocomerce/content-single-product.php"

content-single-product.php отвечает за карточку товара. Внутри вы обнаружите разметку и хуки. Его можно переписать на свой лад. Все что вам остается это ознакомиться с хуками и подключать их в свою разметку.

стилизация подтягивается с get_header () так что вы можете создавать даже новую разметку

Answer 4 · 2021-01-06 14:45:02

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

Answer 5 · 2021-07-27 00:09:08

Js пишется всегда в конце так как должен получить DOM. Как раз в конце и задается условие.
Опишу логику:
Вам Поможет булевый оператор confirm("принимаешь куки? ");
И все это дело естественно завернуть в

document.addEventListener("DOMContentLoaded", function(event) {
//твои усдовия
});

Если confirm == true { подключаем метрику}

Можно сделать не так топорно, вывести всплывающее окно с двумя вариантами. К каждому привязать событие. И вновь вернуться к условию если"да, то на те метрику" иначе "можно оставить пустым или явно дать понять что куки(печенек) не будет)))