Tengo un código que pasa de imagen a imagen con javascript pero quería que cuando el data-sli-to fuera igual a 1 la imagen desapareciera, pero en cambio la imagen sigue igual como si nada, ¿por qué no funciona?
<section class="slider_section "> <div class="slider_bg_box"> <img id="myImage" src="{{url ('assets/images/slider-bg.jpg')}}" alt=""> </div> <script> if($("li").attr("data-slide-to") == "1") { document.getElementById("myImage").style.display = "none"; } </script> <div class="container"> <ol class="carousel-indicators"> <li data-target="#customCarousel1" data-slide-to="0" class="active"></li> <li data-target="#customCarousel1" data-slide-to="1" ></li> <li data-target="#customCarousel1" data-slide-to="2"></li> </ol> </div> </section>Después de revisar la documentación de bootstrap4, parece que tiene algunos problemas de estructura con su código. Recomendaría revisar primero la documentación para que el formato sea correcto antes de intentar usar JavaScript para agregar funcionalidad. A continuación se muestra un ejemplo que es pertinente a su pregunta.
En segundo lugar, debe mantener JavaScript y CSS en sus propios archivos.
Nota: Ejemplo extraído de www.w3schools.com.
.carousel-inner img { width: 100%; height: 100%; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Los Angeles" width="1100" height="500"> </div> <div class="carousel-item"> <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500"> </div> <div class="carousel-item"> <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="New York" width="1100" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>