0

estoy haciendo un slider pero por mas que intento no se me ocurre una forma de que cada elemento tenga un fondo por separado sin que se buguee, ya probe con separar cada swiper_slide individualmente pero solo se pone mal.

No se si haya un comando que me permita modificar una misma clase, pero poniendo un fondo distinto a cada

El problema del bug se da cuando separo los cuadros en distintas clases

introducir la descripción de la imagen aquí

<div class="container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="es (3).png" alt="#" class="img-ico">
                <div class="card-cont">
                    <div class="card-title">
                        <h4>Ciberseguridad</h4>
                    </div>
                    <div class="card-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p>
                    </div>
                    <div class="card-link">
                        <a href="#">Ver</a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="es (5).png" alt="#" class="img-ico">
                <div class="card-cont">
                    <div class="card-title">
                        <h4>Arquitectura</h4>
                    </div>
                    <div class="card-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p>
                    </div>
                    <div class="card-link">
                        <a href="#">Ver</a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="es (2).png" alt="#" class="img-ico">
                <div class="card-cont">
                    <div class="card-title">
                        <h4>Contabilidad</h4>
                    </div>
                    <div class="card-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p>
                    </div>
                    <div class="card-link">
                        <a href="#">Ver</a>
                    </div>
                </div>
            </div>
            </div>
        </div>

.swiper-slide {
    text-align: center;
    font-size: 18px;
    color: white;
    background: url(Ciberseg.png);
    background-position: center;
    border-radius: 10%;
  }
3
  • No termino de entender el planteo, pero puedes agregar más de una clase, entonces dejar en todos la clase .swiper-slide y ademas agregarle ej swiper-slide-bg1, swiper-slide-bg2 y swiper-slide-bg3 y luego a cada una de ellas le pones el fonde deseado.. Commented el 4 nov. 2022 a las 1:28
  • Perfecto, eso era lo que necesitaba, muchas gracias Commented el 4 nov. 2022 a las 1:41
  • Publiqué la respuesta con más detalle de como quedaría, favor si te fue útil marcar como correcta para que se cierre la pregunta y para que otros puedan aprovechar la info. Muchas gracias. Commented el 4 nov. 2022 a las 1:50

2 respuestas 2

0

Podrías agregar una clase adicional a los elementos con clase .swiper-slide, y utilizar esas clases adicionales para ponerles diferentes background.

Por ejemplo:

HTML

<div class="container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-bg1">
                <img src="es (3).png" alt="#" class="img-ico">
                <div class="card-cont">
                    <div class="card-title">
                        <h4>Ciberseguridad</h4>
                    </div>
                    <div class="card-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p>
                    </div>
                    <div class="card-link">
                        <a href="#">Ver</a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-bg2">
                <img src="es (5).png" alt="#" class="img-ico">
                <div class="card-cont">
                    <div class="card-title">
                        <h4>Arquitectura</h4>
                    </div>
                    <div class="card-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p>
                    </div>
                    <div class="card-link">
                        <a href="#">Ver</a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-bg3">
                <img src="es (2).png" alt="#" class="img-ico">
                <div class="card-cont">
                    <div class="card-title">
                        <h4>Contabilidad</h4>
                    </div>
                    <div class="card-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p>
                    </div>
                    <div class="card-link">
                        <a href="#">Ver</a>
                    </div>
                </div>
            </div>
            </div>
        </div>

CSS

.swiper-slide {
    text-align: center;
    font-size: 18px;
    color: white;
    border-radius: 10%;
    background-position: center;
  }

.swiper-slide-bg1 {
    background: url(imagen1.png);
}

.swiper-slide-bg2 {
    background: url(imagen2.png);
}

.swiper-slide-bg3 {
    background: url(imagen3.png);
}
0

Hay varias maneras: te comparto dos formas muy buenas.

El primero y el más bueno es usando los pseudo clases en CSS:

:nth-child()

Y el segundo también muy bien trabajado es agregando una nueva clase en HTML:

<div clases="swiper-slide nuevaClase"></div>

En este ejemplo uso los dos:

/* Normal */
.swiper-slide { 
text-align: center; 
font-size: 18px; 
color: white; 
background: url(Ciberseg.png); 
background-position: center; 
border-radius: 10%; 
}

/* opcion 1: pseudo clase */

.swiper-slide:nth-child(2) { 
background: yellow
}

.swiper-slide:nth-child(3) { 
background: green
}

/* opcion 2: una nueva clase */

.swiper-slide.uno {
background-color: red
}
            
            
<div class="container"> 
        
        <div class="swiper mySwiper"> 
            
            <div class="swiper-wrapper"> 
                
                <div class="swiper-slide uno"> 
                    
                    <img src="es (3).png" alt="#" class="img-ico"> 
                    
                    <div class="card-cont"> 
                        
                        <div class="card-title"> 
                            
                            <h4>Ciberseguridad</h4> 
                            
                        </div> 
                        <div class="card-desc"> 
                            
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p> 
                            
                        </div> 
                        <div class="card-link"> 
                            
                            <a href="#">Ver</a> 
                            
                        </div> 
                    </div> 
                </div> 
                <div class="swiper-slide dos"> 
                    
                    <img src="es (5).png" alt="#" class="img-ico"> 
                    
                    <div class="card-cont"> 
                        
                        <div class="card-title"> 
                            
                            <h4>Arquitectura</h4> 
                            
                        </div> 
                        <div class="card-desc"> 
                            
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p> 
                            
                        </div> 
                        <div class="card-link"> 
                            
                            <a href="#">Ver</a> 
                            
                        </div> 
                    </div> 
                </div> 
                <div class="swiper-slide tres"> 
                    
                    <img src="es (2).png" alt="#" class="img-ico"> 
                    
                    <div class="card-cont"> 
                        
                        <div class="card-title"> 
                            
                            <h4>Contabilidad</h4> 
                            
                        </div> 
                        <div class="card-desc"> 
                            
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam labore nihil ea amet quia nam dolores repudiandae</p> 
                            
                        </div> 
                        <div class="card-link"> 
                            
                            <a href="#">Ver</a> 
                            
                        </div> 
                    </div> 
                </div> 
            </div> 
            </div>

            

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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