I have a code that passes from image to image with javascript but I wanted when the data-slide-to was equal to 1 the image would disappear, but instead the image remains the same as if nothing happened, why isn't it working?
<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>
After reviewing the bootstrap4 documentation, it looks like you have some structure issues with your code. I would recommend reviewing the documentation first so that the format is correct before trying to use JavaScript to add functionality. Below is an example that is pertinent to your question.
Secondly, you should keep JavaScript and CSS in their own files.
Note: Example pulled from 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>