@section('slide')

<div class="container">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ URL::to('/images/slide1.jpg') }}" class="d-block w-100" alt="X-Gen"/>
            </div>
            <div class="carousel-item">
                <img src="{{ URL::to('/images/slide2.jpg') }}" class="d-block w-100" alt="X-Gen"/>
            </div>
        </div>
    </div>
</div>

<style>
.carousel-indicators {
    margin-bottom: -5px;
}

.carousel-indicators button {
    width: 20px !important;
    height: 20px !important;
    background-color: #818181 !important;
    border-radius: 50% !important;
}
</style>
@endsection