fm-lp-factory/factory/templates/template1/carousel/carouselForImagesWithControlTopLeft.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";

let slideIndex = 1;

export default (component) => {
  css();
  const section = document.createElement("section");
  section.classList.add("fm-carousel-ctrl-top", "fm-section-container");
  section.innerHTML = template
    .replace("%title%", component.title);
  document.querySelector("#fm-landing-page-content").appendChild(section);

  component.data.forEach((card, index) => {
    const cardTemplate = templateCarrouselCard
      .replace("%pagination%", `${index + 1} / ${component.data.length}`)
      .replace("%cardImage", card.image)
      .replace("%imageTitle%", card.title);
    section.querySelector(".carousel-inner-container").insertAdjacentHTML("beforeend", cardTemplate);
    showSlides(section, slideIndex);

  });

  section.querySelectorAll('[fm-action="slidePrev"]').forEach((element) => {
    element.addEventListener("click", () => {
      plusSlides(section, -1);
    });
  });

  section.querySelectorAll('[fm-action="slideNext"]').forEach((element) => {
    element.addEventListener("click", () => {
      plusSlides(section, 1);
    });
  });
}

const template = /*html*/ `
<div class="fm-carousel-ctrl-top-header">
  <h2>%title%</h2>
  <div class="fm-carousel-control fm-desktop">
    <span class="fm-carousel-control-btn" fm-action="slidePrev">❮</span>
    <span class="fm-carousel-control-btn" fm-action="slideNext">❯</span>
  </div>
</div>
<div class="carousel-inner-container">
  <div class="fm-carousel-control fm-mobile">
      <span class="fm-carousel-control-btn " fm-action="slidePrev">❮</span>
      <span class="fm-carousel-control-btn" fm-action="slideNext">❯</span>
  </div>
</div>
`;

const templateCarrouselCard = /*html*/ `
<div class="fm-carousel-ctrl-top-cell fm-fade fm-carousel-hidden">
  <div class="fm-carrousel-img-frame">
    <img src="%cardImage" >
  </div>
  <div class="text">%imageTitle%</div>
</div>
`;

function plusSlides(sliderContainer, n) {
  showSlides(sliderContainer, slideIndex += n);
}

function showSlides(sliderContainer, n) {
  let slides = sliderContainer.getElementsByClassName("fm-carousel-ctrl-top-cell");

  if (n > slides.length) slideIndex = 1
  if (n < 1) slideIndex = slides.length

  // Hide all slides
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.add("fm-carousel-hidden");
    slides[i].classList.remove("first-slide");
  }
  if (window.innerWidth > 1000) { // Show a range of 4 slides
    for (let i = slideIndex - 1; i < slideIndex + 3; i++) {
      if (i === (slideIndex - 1)) slides[i].classList.add("first-slide");
      if (i < slides.length) slides[i].classList.remove("fm-carousel-hidden");
    }
  }
  else if (window.innerWidth > 768) { // Show a range of 3 slides
    for (let i = slideIndex - 1; i < slideIndex + 2; i++) {
      if (i === (slideIndex - 1)) slides[i].classList.add("first-slide");
      if (i < slides.length) slides[i].classList.remove("fm-carousel-hidden");
    }
  }
  else {  // Show a range of 2 slides
    for (let i = slideIndex - 1; i < slideIndex + 1; i++) {
      if (i === (slideIndex - 1)) slides[i].classList.add("first-slide");
      if (i < slides.length) slides[i].classList.remove("fm-carousel-hidden");
    }
  }
}

const css = () => {
  updateFmTemplateCss(/*css*/
    `
    .fm-carousel-ctrl-top .fm-carousel-ctrl-top-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .fm-carousel-ctrl-top .fm-carousel-hidden {
      display: none;
    }

    .fm-carousel-ctrl-top .carousel-inner-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .fm-carousel-ctrl-top .fm-carousel-control.fm-mobile {
      display: none;
      justify-content: space-between;
      margin: auto;
      position: absolute;
      width: 100%;
    }

    @media (max-width: 768px) {
      .fm-carousel-ctrl-top .carousel-inner-container {
        overflow: hidden;
        width: 100%;
      }

      .fm-carousel-ctrl-top .fm-carousel-control.fm-mobile {
        display: flex;
      }

      .fm-carousel-ctrl-top .fm-carousel-control.fm-desktop {
        display: none;
      }
    }

    .fm-carousel-ctrl-top .fm-carousel-control {
      display: flex;
      gap: 10px;
    }

    .fm-carousel-ctrl-top .fm-carousel-control
    .fm-carousel-control-btn {
      padding:8px;
      cursor: pointer;
      background: var(--fm-secondary-button-color);
      color: var(--fm-secondary-button-text-color);
      border-radius: 50%;
      transition: all 0.6s ease;
    }

    .fm-carousel-ctrl-top .fm-carousel-control
    .fm-carousel-control-btn:hover {
      background: var(--fm-primary-button-color-hover);
      color: var(--fm-primary-button-text-color-hover);
    }

    .fm-carousel-ctrl-top
    .carousel-inner-container .fm-carousel-ctrl-top-cell {
      margin: 0 10px;
    }

    .fm-carousel-ctrl-top .carousel-inner-container
     .fm-carousel-ctrl-top-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover; 
      border-radius: var(--fm-base-border-radius);
    }
    .fm-carousel-ctrl-top .carousel-inner-container
     .fm-carousel-ctrl-top-cell .fm-carrousel-img-frame {
      width: 300px;
      height: 300px;
      border-radius: var(--fm-base-border-radius);
      transition: all .3s ease;
    }

    .fm-carousel-ctrl-top 
    .carousel-inner-container .fm-carousel-ctrl-top-cell.first-slide .fm-carrousel-img-frame{
      width: 350px;
    }

    @media (min-width: 900px) {
      .fm-carousel-ctrl-top .carousel-inner-container
      .fm-carousel-ctrl-top-cell .fm-carrousel-img-frame:hover {
          width: 400px;
          height: 400px;
      }
  }

    @media (max-width: 1100px) {
      .fm-carousel-ctrl-top
      .carousel-inner-container .fm-carousel-ctrl-top-cell .fm-carrousel-img-frame {
        width: 100%;
        height: 200px;
      }
      .fm-carousel-ctrl-top 
      .carousel-inner-container .fm-carousel-ctrl-top-cell.first-slide .fm-carrousel-img-frame{
        width: 300px;
      }
    }

    @media (max-width: 768px) {
      .fm-carousel-ctrl-top
      .carousel-inner-container .fm-carousel-ctrl-top-cell .fm-carrousel-img-frame {
        width: 150px;
      }
      .fm-carousel-ctrl-top 
      .carousel-inner-container .fm-carousel-ctrl-top-cell.first-slide .fm-carrousel-img-frame{
        width: 200px;
      }
    }

    /* Fading animation */
    .fm-fade {
      animation-name: fm-fade-key;
      animation-duration: 1.5s;
    }

    @keyframes fm-fade-key {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }
    `
  );
}