Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

118
Visualizações
How to make slides on web page mobile responsive using JavaScript?

I need to blur other slides is i open one of them like on design layout. How i can do it? I tried to write a new function, but I do not have enough knowledge and practice in the syntax, so my code does not work. I need to fix this in mobile version.

(function () {
    const closeEveryItemInContainer = (container) => {
        const items = container.find(".assortment-menu__item");
        const content = container.find(".assortment-menu__content");

        items.removeClass("active");
        content.width(0);
    };

    const measureWidth = (block) => {
        let itemWidth = 0;

        const screenWidth = $(window).width();
        const titlesWidth = block.find(".assortment-menu__title").width() * 3;
        const textContainer = block.find(".assortment-menu__container");
        const paddingLeft = parseInt(textContainer.css("padding-left"));
        const paddingRight = parseInt(textContainer.css("padding-right"));

        const isMobile = window.matchMedia("(max-width: 768px)");

        if (isMobile.matches) {
            itemWidth = screenWidth - titlesWidth
        } else {
            itemWidth = 500
        }

        return {
            container: itemWidth,
            textContainer: itemWidth - paddingLeft - paddingRight
        }
    };

    const openItem = (item) => {
        const hiddenBlock = item.find(".assortment-menu__content");
        const reqWidth = measureWidth(item).container;
        const textBlock = item.find(".assortment-menu__container");
        const textBlockWidth = measureWidth(item).textContainer;

        item.addClass("active");
        hiddenBlock.width(reqWidth);
        textBlock.width(textBlockWidth)
    };

    $(".assortment-menu__title").click((e) => {
        e.preventDefault();

        const $this = $(e.currentTarget);
        const item = $this.closest(".assortment-menu__item");
        const itemOpened = item.hasClass("active");
        const container = $this.closest(".assortment-menu");

        if (itemOpened) {
            closeEveryItemInContainer(container);
        } else {
            closeEveryItemInContainer(container);
            openItem(item);
        }
    });

    $(".assortment-menu__close").click((e) => {
        e.preventDefault();

        closeEveryItemInContainer($('.assortment-menu'));
    });
}());

enter image description here

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda