Shadow and Circle number [Carousel - Boostrap 4]

Bootstrap Studio Help
1

I trying to do 2 things in a carousel in boostrap 4

1- Shadow in img text, in carousel-caption use this dark effect below the text

2- Indicators in circle format and with a number inside

This 2 things just like this IMG: https://i.imgur.com/gH9TGQ0.png

I've trid this:

<script>
/* shadow */
.carousel-caption {
  background: rgba(0,0,0,0.5);
  background-color: rgba(0,0,0,.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* circle indicators and numbers */
.carousel-indicators-numbers {
    li {
      text-indent: 0;
      margin: 0 2px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 100%;
      line-height: 30px;
      color: #fff;
      background-color: #999;
      transition: all 0.25s ease;
      &.active, &:hover {
        margin: 0 2px;
        width: 30px;
        height: 30px;
        background-color: #337ab7;        
      }
    }
}
</script>


<!-- carrousel NEWS -->
<div class="col-md-9" style="height:550px; width: 900px;">

<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <!-- indicators dot nov -->
  <ol>
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
  </ol>

  <!-- wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <img src="http://placehold.it/850x500" alt="Third slide" />
        <div class="carousel-caption">
            <a href="#"><h3>News 1</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img src="http://placehold.it/850x500" alt="Third slide" />
        <div class="carousel-caption">
            <a href="#"><h3>News 2</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img src="http://placehold.it/850x500" alt="Third slide" />
        <div class="carousel-caption">
            <a href="#"><h3>News 3</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
  </div>

  <!-- controls or next and prev buttons -->
  <a href="#carouselExampleIndicators">
    <span></span>
    <span>Previous</span>
  </a>
  <a href="#carouselExampleIndicators">
    <span></span>
    <span>Next</span>
  </a>
</div>
</div>

</div>

But with no effect, it's just show like default boostrap carousel: [url]https://i.imgur.com/xcLAPk1.png[/url]

https://i.imgur.com/xcLAPk1.png

2

Well first off, your using SCSS and what you have in the script tag is not JS code it's CSS and SCSS so you shouldn't be referring to it like that. Also, no where in your HTML example do you have the class carousel-indicators-numbers. It looks like you did a Custom Code component of a copy/pasted carousel?

I'd say ditch it. Drag/drop in the Carousel component from the Component pane's (top/left) Studio tab. Then in the Overview pane (bottom/left) expand so you can select a Slide element. Then for each Slide element select and then go to the Options pane (top/right) select the Gear Cog icon and enable Caption.

Then in your SCSS file (Design pane [bottom/right] right click select Create SCSS if you haven't) copy/paste the following SCSS code.

body {
    /* Set "my-sec-counter" to 0 */
    counter-reset:my-sec-counter;
}
.carousel-caption {
    background:rgba(0,0,0,0.5);
    background-color:rgba(0,0,0,.5);
    text-shadow:0 1px 4px rgba(0, 0, 0, 0.85);
}
.carousel-indicators {
    li {
        text-indent: 0;
        margin: 0 2px;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 100%;
        line-height: 30px;
        color: #fff;
        background-color: #999;
        transition: all 0.25s ease;
        &.active, &:hover {
            margin: 0 2px;
            width: 30px;
            height: 30px;
            background-color: #337ab7;        
        }
    }
}
.carousel-indicators {
    li {
        &:before {
            /* Increment "my-sec-counter" by 1 */
            counter-increment: my-sec-counter;
            content: counter(my-sec-counter);
            transform: translate(10px,10px);
        }
    }
}

Yes that's CSS in your SCSS file because SCSS can be straight up CSS or mix of etc... and it was just easier to say to do that. :)

Saj