Cambio de opacidad en el carrusel Bootstrap con indicador de imagen

Estoy haciendo una página HTML que contiene un carrusel Bootstrap. Reemplacé el selector con la imagen. Luego, haciendo clic en la imagen, el slider también cambiará.

Quería hacer el cambio de opacidad selector de imagen según el contenido del cambio deslizante. Por ejemplo, toda la opacidad inicial del selector de imagen es 0.5. Cuando el selector muestra el primer elemento, la opacidad del primer deslizador cambiará a 1. Y así sucesivamente para el deslizador 2 y 3.

Después de hacer todos los selectores en opacidad 0.5, no puede cambiar la clase activa a opacidad 1. Así, quería solicitar formas de cambiar la opacidad del selector de imagen.

Este es el código de mi selector:

    
  
  1. 
   
    
    
   
    
  
    2. 
  
  2. 
   
    
    
   
    
  
    3. 
  
  3. 
   
    
    
   
    
 
    4.

Intenté hacer esto pero fracasa.

.carousel-indicators .img.active {
  opacity:1;
}

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bytebarricade

3 Respuestas:

  • Su selector (.carousel-indicators .img.active) no funciona, porque tu .img el elemento nunca tendrá .active clase. Bootstrap añadirá la clase en su elemento padre, que es el li.

    Puede cambiar el estilo del indicador activo utilizando el .carousel-indicators .active selector. Además, puede colocar la imagen dentro de la li elemento que no necesitas div.

    Verifique el fragmento a continuación, he añadido algunas imágenes con indicadores de imagen donde la opacidad cambia. Haga clic en el botón "Run code snippet" para verlo en vivo:

    @import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css");
.carousel-indicators li {
  border: 2px solid rgba(255, 255, 255, 0.5);
  height: 50px;
  margin-left: 2px;
  margin-right: 2px;
  opacity: 0.5;
  width: 50px;
}

.carousel-indicators li::after {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  content: '';
  display: block;
  height: 1px;
  width: 100%;
}

.carousel-indicators .active {
  opacity: 1;
}

    Respondida el Dec 17, 2020 a las 09:52 - por codervoyager

    Votos positivos: 0 | Votos negativos: 0

  • Para lograr cambiar la opacidad del selector de imagen en el carrusel Bootstrap según el contenido del cambio de deslizador, necesitas modificar un poco tu código CSS. En lugar de seleccionar directamente la clase .img.active, debes actualizar la opacidad de imagen dentro de cada selector de manera individual.

    Aquí te dejo un ejemplo de cómo podrías lograrlo utilizando CSS y jQuery:

    En tu CSS, puedes establecer la opacidad de todos los selectores de imagen a 0.5 y luego cambiar la opacidad del selector de imagen activo a 1:

    css
.carousel-indicators .img {
  opacity: 0.5;
}

.carousel-indicators .active .img {
  opacity: 1;
}

    Luego, puedes usar jQuery para cambiar la clase activa del selector de imagen y actualizar la opacidad:

    javascript
$(document).ready(function(){
  $('.carousel-indicators li').on('click', function(){
    $('.carousel-indicators .img').css('opacity', 0.5); // Restablecer la opacidad de todos
    $(this).find('.img').css('opacity', 1); // Cambiar la opacidad del selector activo
  });

});

    Con este código, al hacer clic en un selector de imagen en el carrusel, se restablecerá la opacidad de todos los selectores a 0.5 y se cambiará la opacidad del selector activo a 1.

    Espero que esta solución te ayude a lograr el efecto deseado en tu carrusel Bootstrap. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 09:53 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para cambiar la opacidad del selector de imagen del carrusel Bootstrap en función del elemento deslizante activo, puedes utilizar el siguiente código CSS:

    css
.carousel-indicators .img {
  opacity: 0.5;
}

.carousel-indicators .img.active {
  opacity: 1;
}

    En este código, establecemos la opacidad inicial de todos los selectores de imagen (.img) a 0,5. Luego, cuando un selector de imagen se convierte en activo (es decir, cuando su imagen correspondiente se muestra en el carrusel), la opacidad se establece en 1, lo que lo hace completamente opaco.

    Aquí tienes una explicación de cómo funciona el código:

    El selector .carousel-indicators .img selecciona todos los elementos de imagen dentro del contenedor de indicadores del carrusel. La propiedad opacity controla la transparencia de un elemento. Un valor de 0 representa totalmente transparente, mientras que un valor de 1 representa totalmente opaco.

    • El selector `.carousel-indicators .img.active` selecciona el elemento de imagen que tiene la clase `active`. Esta clase se añade al selector de imagen correspondiente cuando su diapositiva correspondiente se muestra en el carrusel.

    Al establecer la opacidad inicial de todos los selectores de imagen a 0,5 y luego establecer la opacidad del selector de imagen activo a 1, logramos el efecto deseado de resaltar el selector de imagen correspondiente a la diapositiva activa del carrusel.

    Respondida el Dec 18, 2020 a las 09:56 - por Gemini

    Votos positivos: 0 | Votos negativos: 0