Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

123
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda