0

Estoy trabajando en un proyecto en el que tengo dos carouseles juntos y quisiera evitar repetir código y poder reutilizarlo para que las funciones y los elementos del dom seleccionados sean suficientes.

introducir la descripción de la imagen aquí

Me gustaría que al tocar cada flecha se mueva su respectivo carousel con el mismo código y cambiando los nombres de clases o algo así. Este es mi código:

const slider = document.querySelector('#slider');


let sliderSection = slider.children;
let sliderSectionLast = sliderSection[sliderSection.length - 1];

const btnLeft = document.querySelectorAll('.slider__btn--left');
const btnRight = document.querySelectorAll('.slider__btn--right');

slider.insertAdjacentElement("afterbegin", sliderSectionLast);

function next() {
  let sliderSectionFirst = slider.children[0];
  
  slider.style.marginLeft = "-200%";
  slider.style.transition = "all 0.5s";

  setTimeout(() => {
slider.style.transition = "none";
slider.insertAdjacentElement('beforeend', sliderSectionFirst);
slider.style.marginLeft = "-100%";
  }, 500);
}

function prev() {
  let sliderSection = slider.children;
  let sliderSectionLast = sliderSection[sliderSection.length - 1];
  
  slider.style.marginLeft = "0";
  slider.style.transition = "all 0.5s";

  setTimeout(() => {
slider.style.transition = "none";
slider.insertAdjacentElement("afterbegin", sliderSectionLast);
slider.style.marginLeft = "-100%";
  }, 500);
}

btnRight.forEach(boton => {
  boton.addEventListener("click", function(){
next();
  });
});

btnLeft.forEach(boton => {
  boton.addEventListener("click", function(){
prev();
  });
});


setInterval(() => {
  next();
}, 5000);
/* Slider */

.container-slider{
width: 90%;
overflow: hidden;
border: 2px solid #8a008a;
border-radius: .5rem;
box-shadow: 1px 3px 21px 0px rgba(138,0,138,1);
position: relative;
justify-self: center;
}

.slider{
width: 400%;
height: 40rem;
display: flex;
margin-left: -100%;
}

.slider__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.slider__btn{
position: absolute;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, .7);
top: 50%;
transform: translateY(-50%);
font-weight: bold;
text-align: center;
border-radius: 50%;
font-size: 1.6rem;
cursor: pointer;
}

.slider__btn:hover{
background-color: #000;
}

.slider__btn--right{
right: .3rem;
}

.slider__btn--left{
left: .3rem;
}
<main class="contenedor-grande">
    <section class="producto">
        <div class="container-slider">
            <div class="slider" id="slider">
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.39 PM.jpeg" alt="" class="slider__img">
                </div>
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.40 PM.jpeg" alt="" class="slider__img">
                </div>
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM (1).jpeg" alt="" class="slider__img">
                </div>
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM.jpeg" alt="" class="slider__img">
                </div>
            </div>
            <div class="slider__btn slider__btn--right" id="btn-right">></div>
            <div class="slider__btn slider__btn--left" id="btn-left"><</div>
        </div>

        <div class="container-info">
            <h2>Supreme Prime 5%</h2>

            <p>Echa un vistazo al Supreme Prime que es un dispositivo de vape desechable con ejuice de nicotina de sal precargada. El dispositivo compacto funciona con una batería integrada de 1300 mAh (no recargable) y viene precargado con 12 ml de su e-juice favorito, que dura efectivamente hasta 3500 vapeadas.</p>

            <div class="contenedor-boton">
                <select class="custom-select">
                    <option selected disabled>Sabores disponibles</option>
                    <option>Purple rain</option>
                    <option>Rainbow</option>
                    <option>Blue razz</option>
                    <option>Orange dream</option>
                </select>

                <div class="boton">
                    <button class="cta">
                        <span class="hover-underline-animation"><a href="">Consultar</a></span>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <section class="producto">
        <div class="container-slider">
            <div class="slider" id="slider">
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.39 PM.jpeg" alt="" class="slider__img">
                </div>
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.40 PM.jpeg" alt="" class="slider__img">
                </div>
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM (1).jpeg" alt="" class="slider__img">
                </div>
                <div class="slider__seccion">
                    <img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM.jpeg" alt="" class="slider__img">
                </div>
            </div>
            <div class="slider__btn slider__btn--right" id="btn-right2">></div>
            <div class="slider__btn slider__btn--left" id="btn-left2"><</div>
        </div>

        <div class="container-info">
            <h2>Supreme Prime 5%</h2>

            <p>Echa un vistazo al Supreme Prime que es un dispositivo de vape desechable con ejuice de nicotina de sal precargada. El dispositivo compacto funciona con una batería integrada de 1300 mAh (no recargable) y viene precargado con 12 ml de su e-juice favorito, que dura efectivamente hasta 3500 vapeadas.</p>

            <div class="contenedor-boton">
                <select class="custom-select">
                    <option selected disabled>Sabores disponibles</option>
                    <option>Purple rain</option>
                    <option>Rainbow</option>
                    <option>Blue razz</option>
                    <option>Orange dream</option>
                </select>

                <div class="boton">
                    <button class="cta">
                        <span class="hover-underline-animation"><a href="">Consultar</a></span>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </section>     

</main>

1 respuesta 1

1

Puedes utilizar web component que son básicamente para esto, reutilizar componentes para poder repetirlos.

Aclaro que mi idea no es hacer carousel, toda la lógica es del OP, yo básicamente tomé su lógica y la llevé a web component.

1) Primer paso: crear templates

Crearemos 2 templates, uno para el carousel y otro para cada item de éste

    <template id="yus-slider">
        <style>
           //TODO EL ESTILO ACA
        </style>
        <div class="container-slider">
            <div class="slider">
            
            </div>
            <div class="slider__btn slider__btn--right">></div>
            <div class="slider__btn slider__btn--left" ><</div>
        </div>
    </template>
     <template id="yus-image" >
        <div class="slider__seccion">
            <img alt="" class="slider__img" />
        </div>
    </template>

2) Creación de componente: Item del carousel (yus-image)

customElements.define('yus-image',
    class extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById('yus-image'); //obtemos el template correspondiente
            let templateContent = template.content.cloneNode(true); //lo clonamos
            templateContent.querySelector(".slider__img").setAttribute("src", this.getAttribute("img")); //colocamos la imagen que viene como atributo, dentro del elemento imd
            this.appendChild(templateContent); //añadimos html al componente SIN usar shadow dom
        }
    });

3) Creación de componente: Carousel (yus-slider)

Este componente es el que tiene toda la lógica. las funciones next y prev serían copias calcadas de las funciones del OP

customElements.define('yus-slider',
    class extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById('yus-slider');
            let templateContent = template.content.cloneNode(true);
            this.slider = templateContent.querySelector('.slider');
                   
            let secciones = this.querySelectorAll(".slider__seccion");
            secciones.forEach(e => { //añadimos cada imagen
                this.slider.appendChild(e);
            });
            this.slider.style.width = (secciones.length * 100) + '%'; //con esto calculamos en ancho del carousel
            this.innerHTML = "";
            this.attachShadow({ mode: 'open' }).appendChild(templateContent); //añadimos HTML al componente usando shadow dom

        }
        connectedCallback() {
            this.nextButton = this.shadowRoot.querySelector(".slider__btn--right");
            this.prevButton = this.shadowRoot.querySelector(".slider__btn--left");
            this.nextButton.addEventListener("click", this.next.bind(this));
            this.prevButton.addEventListener("click", this.prev.bind(this));
        }

        disconnectedCallback() { // removemos los elementos al remover el componente, esto es especialmente útil en SPA
            this.nextButton.removeEventListener("click", this.next.bind(this));
            this.prevButton.removeEventListener("click", this.prev.bind(this));
        }

        next() {
            //codigo
        }
        prev() {
           //codigo
        }
    });

4) Como utilizarlo ??

Esta es la parte buena de haber hecho todo el revoltijo anterior, es que utilizarlo y reutilizarlo es sumamente simple

<yus-slider>
  <yus-image img="..."></yus-image>
  <yus-image img="..."></yus-image>
  <yus-image img="..."></yus-image>
</yus-slider>

5) Demo completa

customElements.define('yus-image',
    class extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById('yus-image');
            let templateContent = template.content.cloneNode(true);
            templateContent.querySelector(".slider__img").setAttribute("src", this.getAttribute("img"));
            this.appendChild(templateContent);
        }
    });

customElements.define('yus-slider',
    class extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById('yus-slider');
            let templateContent = template.content.cloneNode(true);
            this.slider = templateContent.querySelector('.slider');
                   
            let secciones = this.querySelectorAll(".slider__seccion");
            secciones.forEach(e => {
                this.slider.appendChild(e);
            });
            this.slider.style.width = (secciones.length * 100) + '%';
            this.innerHTML = "";
            this.attachShadow({ mode: 'open' }).appendChild(templateContent);

        }
        connectedCallback() {
            this.nextButton = this.shadowRoot.querySelector(".slider__btn--right");
            this.prevButton = this.shadowRoot.querySelector(".slider__btn--left");
            this.nextButton.addEventListener("click", this.next.bind(this));
            this.prevButton.addEventListener("click", this.prev.bind(this));
        }

        disconnectedCallback() {
            this.nextButton.removeEventListener("click", this.next.bind(this));
            this.prevButton.removeEventListener("click", this.prev.bind(this));
        }

        next() {
            let sliderSectionFirst = this.slider.children[0];
  
            this.slider.style.marginLeft = "-200%";
            this.slider.style.transition = "all 0.5s";

            setTimeout(() => {
                this.slider.style.transition = "none";
                this.slider.insertAdjacentElement('beforeend', sliderSectionFirst);
                this.slider.style.marginLeft = "-100%";
            }, 500);
        }
        prev() {
            let sliderSection = this.slider.children;
            let sliderSectionLast = sliderSection[sliderSection.length - 1];
  
            this.slider.style.marginLeft = "0";
            this.slider.style.transition = "all 0.5s";

            setTimeout(() => {
                this.slider.style.transition = "none";
                this.slider.insertAdjacentElement("afterbegin", sliderSectionLast);
                this.slider.style.marginLeft = "-100%";
            }, 500);
        }
    });
<template id="yus-slider">
    <style>
.container-slider{
width: 90%;
overflow: hidden;
border: 2px solid #8a008a;
border-radius: .5rem;
box-shadow: 1px 3px 21px 0px rgba(138,0,138,1);
position: relative;
justify-self: center;
}

.slider__seccion{
    width:100%;
}
.slider{
height: 40rem;
display: flex;
margin-left: -100%;
}

.slider__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.slider__btn{
position: absolute;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, .7);
top: 50%;
transform: translateY(-50%);
font-weight: bold;
text-align: center;
border-radius: 50%;
font-size: 1.6rem;
cursor: pointer;
}

.slider__btn:hover{
background-color: #000;
}

.slider__btn--right{
right: .3rem;
}

.slider__btn--left{
left: .3rem;
    </style>
    <div class="container-slider">
        <div class="slider">
            
        </div>
        <div class="slider__btn slider__btn--right">></div>
        <div class="slider__btn slider__btn--left" ><</div>
    </div>
</template>
    <template id="yus-image" >
    <div class="slider__seccion">
        <img alt="" class="slider__img" />
    </div>
</template>
    
<yus-slider>
    <yus-image img="https://cdn.pixabay.com/photo/2015/04/28/13/24/butterflies-743549_960_720.jpg"></yus-image>
    <yus-image img="https://th.bing.com/th/id/R.d9b7fae9cdff06be56e229c8c146232d?rik=Jviq2c854KiI0Q&pid=ImgRaw&r=0"></yus-image>
    <yus-image img="https://th.bing.com/th/id/R.d9c2773b1c241854571d1bdad23af4a5?rik=Au1AINhvAWZmRg&riu=http%3a%2f%2f4.bp.blogspot.com%2f-QMGOoEe7ORo%2fUictQ1DRsJI%2fAAAAAAAB4ow%2fQ3F1jbR67fo%2fs1600%2fcerca-del-cielo-y-los-planetas-im%c3%a1genes-de-fantas%c3%ada-close-to-sky-landscape-1920x1200-wallpaper-.jpg&ehk=7N3VXXUF7ESxVu%2fJqYAG2lwflwMsjAwn7hdRxBGsJms%3d&risl=&pid=ImgRaw&r=0"></yus-image>
</yus-slider>
    
<yus-slider>
    <yus-image img="https://1.bp.blogspot.com/-SWhSjGz23zg/V-l9NmfiarI/AAAAAAAAHN8/6bM91M9G-pk-tiXTGTbNnt8hwHJaVIg7gCLcB/s1600/robotech-anime-600x300.jpg"></yus-image>
    <yus-image img="https://e.rpp-noticias.io/normal/2017/07/17/483948_446600.jpg"></yus-image>
    <yus-image img="https://www.rionegro.com.ar/wp-content/uploads/2020/03/C3SDV3RJ7VEPNDGLNVTPEBJDNI.jpg?w=900"></yus-image>
</yus-slider>

1
  • Hola buenas yussef, gracias, lo pude solucionar de otra forma pero gracias :D el 8 nov. 2022 a las 23:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.