How to set .active with laravel in css?

I tried to show slideshow for first image be show.

Controller

public function index()
{
    $slideshows = Slideshow::latest()->get();
    $services = Service::latest()->get();
    $faqs = Faq::latest()->get();
    return view('Home.index', compact('slideshows', 'services', 'faqs'));
}

index.blade.php

<div id="home" class="pt-5">
    <div class="bd-example">
        <div id="carouselSlider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                @foreach($slideshows as $slideshow)
                    <li data-target="#carouselSlider" data-slide-to="{{ $slideshow->id }}" class="active"></li>
                @endforeach
            </ol>
            <div class="carousel-inner">
                @foreach($slideshows as $slideshow)
                    <div class="carousel-item active">
                        <img src="images/slideshows/{{ $slideshow->image }}" class="d-block w-100">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>{{ $slideshow->title }}</h5>
                            <p>{!! str_limit($slideshow->body, 50) !!}</p>
                        </div>
                    </div>
                @endforeach
            </div>
            <a class="carousel-control-prev" href="#carouselSlider" 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="#carouselSlider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>