@push('styles-head')
@endpush
@push('scripts-head')
<script>
  window.addEventListener(`load`, (event) => {
    const carouselIdAA = `products-designers`;
    const carouselProductsDesigners = new Swiper(`*[data-carousel-id="${ carouselIdAA }"]`, {
    slidesPerView: `auto`,                                      // `auto`
    slidesOffsetBefore: 0,
    spaceBetween: 45,                                           // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                       // 
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: false,                                              // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: true,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselIdAA }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselIdAA }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselIdAA }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `fraction`,                                         // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
      renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' +
          '<span class="divider"></span>' +
          '<span class="' + totalClass + '"></span>';
      },
      formatFractionCurrent: function (number) {
//        return ('0' + number).slice(-2);
        return ('0' + number);
      },
      formatFractionTotal: function (number) {
//        return ('0' + number).slice(-2);
        return ('0' + number);
      },
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselIdAA }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled,`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
    on: {                                                       // Register event handlers
      slideChange: removeHeadingFromSection,
      reachBeginning: showHeadingFromSection,
//      reachEnd: someFunction,
    },
    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true,
      },
      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true,
      },
      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true,
      },
      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false,
        slidesOffsetBefore: 400,
      },
      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false,
      },
      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false,
      }
    }
    });
  });
</script>
<script>
  function removeHeadingFromSection(){
    document.querySelector(`section.products-designers > h2`).classList.add(`undisplay`);
  }
  function showHeadingFromSection(){
    document.querySelector(`section.products-designers > h2`).classList.remove(`undisplay`);
  }
</script>
@endpush
<section class="products-designers swiper" data-carousel-id="products-designers">
  <h2>Conheça o olhar de quem faz acontecer</h2>
  <div class="swiper-wrapper">
      </div>
  <div class="swiper-ui">
    <menu class="swiper-navigation">
      <li class="swiper-button-prev" data-carousel-control-prev-id="products-designers">
        <svg id="" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
      <li class="swiper-button-next" data-carousel-control-next-id="products-designers">
        <svg id="" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
    </menu>
    <div class="swiper-pagination" data-carousel-pagination-id="products-designers"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="products-designers"></div>-->
  </div>
</section>