My current project involves creating a page with multiple sliders, each having their own indicators on the same page. I am attempting to nest the .carousel-indicators li within the corresponding section, but the indicator is not responding within that specific scope. If I remove it from the section (un-nested), it works fine, but this creates conflicts when there are multiple sliders with their own indicators.
Please note that the jfiddle provided is just an example and it seems to work fine there, although the styling is done in sass.
Any suggestions would be greatly appreciated.
//edit: Here's the link to the jfiddle with scss to see the issue more accurately 'https://jsfiddle.net/rickthewebdev/7tbLbbvy/26/'
.carousel-item {
height: 100vh;
width: 100%;
min-height: 300px;
background: no-repeat center center scroll;
background-size: cover;
}
#section-1 {
h1 {
position: absolute;
font-size: 4em;
color: #ffff;
}
.carousel-indicators li {
background-color: #fff;
border: 1px solid #dae1ed;
position: relative;
bottom: 50px;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- BEGIN SECTION 1 -->
<div id="section-1">
<!-- SLIDER BEGIN -->
<div class="container-fluid" id="content">
<div id="indicators-slide-1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="indicators-slide-1" data-slide-to="0" class="active"></li>
<li data-target="indicators-slide-1" data-slide-to="1"></li>
<li data-target="indicators-slide-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One-->
<div class="carousel-item active" style="background-image: url('https://dummyimage.com/1920x800/000/fff')">
<h1> slide 1</h1>
</div>
<!-- .carousel-item -->
<!-- Slide Two-->
<div class="carousel-item" style="background-image: url('https://dummyimage.com/1920x800/000/fff')">
<h1> slide 2</h1>
</div>
<!-- .carousel-item -->
<!-- Slide Three-->
<div class="carousel-item" style="background-image: url('https://dummyimage.com/1920x800/000/fff')">
<h1>slide 3</h1>
</div>
<!-- .carousel-item -->
</div>
<!-- .carousel-inner -->
<!-- Controls -->
<a class="carousel-control-prev" href="#indicators-slide-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#indicators-slide-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- controls -->
</div>
<!-- .container-fluid -->
</div>
<!-- .section-1 -->