• Как настроить автоширину слайдов с 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 комментария
  • Как ускорить итерацию в два раза?

    @402d
    начинал с бейсика на УКНЦ в 1988
    Вы вешаете слушатель на событие прокрутки.
    Частоту их Вы изменить не можете.
    Но там можно получить как параметр само событие
    https://developer.mozilla.org/en-US/docs/Web/API/D...
    начало, конец, продолжение прокрутки
    напрашивается брать изменение позиции, а не просто считать сколько их произошло.

    Есть общий принцип - НЕ ЗАДАЛБОВАТЬ слишком частыми событиями.
    Ответ написан
    1 комментарий
  • Что изучать после чистого JS?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    JavaScript в отрыве от браузера и сервера

    Это как?
    Изучите JavaScript без отрыва от браузера.
    Ответ написан
    Комментировать
  • Как в October cms вывести название товара в Title, а описание в description?

    catdesign
    @catdesign
    Веб-разработчик
    В директории вашей темы в шаблоне layouts/default.htm создаем placeholder.

    {% placeholder meta default %}
       <title>{{ this.page.meta_title }}</title>
       <meta name="description" content="{{ this.page.meta_description }}">
    {% endplaceholder %}


    По умолчанию плейсхолдер содержит метатеги страниц. Это будет работать для staticPages и для CMS страниц.

    Далее если вы хотите вывести не мету страницы, например у вас страница товара и нужно выводить данные товара. Просто вставляете новое содержимое плейсхолдера.

    Предположим что у вас есть страница товара pages/shop/product.htm
    И на странице есть переменная product с моделью товара.
    На странице товара нужно вызвать:

    {% put meta %}
       <title>{{ product.title }}</title>
       <meta name="description" content="{{ product.description }}">
    {% endput %}


    Надеюсь, помог понять принцип.
    Ответ написан
    1 комментарий