<!-- فقط اسلایدها -->
                                                                    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                                                                <img src="/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                
                                                            

                                                                
                                                                    <!-- با کنترل‌ها -->
                                                                    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                                                                <img src="/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">بعدی</span>
                                                                        </button>
                                                                    </div>     
                                                                
                                                            

                                                                
                                                                    <!-- با نشانگرها -->
                                                                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                                                        <div class="carousel-indicators">
                                                                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="اسلاید 1"></button>
                                                                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="اسلاید 2"></button>
                                                                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="اسلاید 3"></button>
                                                                        </div>
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                                                                <img src="/images/small/img-5.jpg" class="d-block w-100" alt="img-5">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">بعدی</span>
                                                                        </button>
                                                                    </div>
                                                                
                                                            

                                                                
                                                                    <!-- با عنوان -->
                                                                    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                                                                <img src="/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
                                                                                <div class="carousel-caption d-none d-md-block">
                                                                                    <h5 class="text-white">عنوان اسلاید اول</h5>
                                                                                    <p>محتوای نمایه‌ای نمایشی برای اسلاید اول.</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
                                                                                <div class="carousel-caption d-none d-md-block">
                                                                                    <h5 class="text-white">عنوان اسلاید دوم</h5>
                                                                                    <p>محتوای نمایه‌ای نمایشی برای اسلاید دوم.</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-5.jpg" class="d-block w-100" alt="img-5">
                                                                                <div class="carousel-caption d-none d-md-block">
                                                                                    <h5 class="text-white">عنوان اسلاید سوم</h5>
                                                                                    <p>محتوای نمایه‌ای نمایشی برای اسلاید سوم.</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">بعدی</span>
                                                                        </button>
                                                                    </div>
                                                                
                                                            

                                                                
                                                                    <!-- کراس فید -->
                                                                    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                                                                <img src="/images/small/img-1.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-2.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-3.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">بعدی</span>
                                                                        </button>
                                                                    </div>
                                                                
                                                            

                                                                
                                                                    <!-- فاصله‌ای مجزا برای carousel-item -->
                                                                    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active" data-bs-interval="10000">
                                                                                <img src="/images/small/img-1.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                            <div class="carousel-item" data-bs-interval="2000">
                                                                                <img src="/images/small/img-2.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-3.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">بعدی</span>
                                                                        </button>
                                                                    </div>
                                                                
                                                            

                                                                
                                                                    <div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                                                                <img src="/images/small/img-4.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-5.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-6.jpg" class="d-block w-100" alt="...">
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">بعدی</span>
                                                                        </button>
                                                                    </div>
                                                                
                                                            

                                                                
                                                                    <!-- واریانت تاریک -->
                                                                    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                                                                        <div class="carousel-indicators">
                                                                            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="اسلاید 1"></button>
                                                                            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="اسلاید 2"></button>
                                                                            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="اسلاید 3"></button>
                                                                        </div>
                                                                        <div class="carousel-inner">
                                                                            <div class="carousel-item active" data-bs-interval="10000">
                                                                                <img src="/images/small/img-8.jpg" class="d-block w-100" alt="...">
                                                                                <div class="carousel-caption d-none d-md-block">
                                                                                    <h5>عنوان اسلاید اول</h5>
                                                                                    <p>محتوای نمایه‌ای نمایشی برای اسلاید اول.</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item" data-bs-interval="2000">
                                                                                <img src="/images/small/img-9.jpg" class="d-block w-100" alt="...">
                                                                                <div class="carousel-caption d-none d-md-block">
                                                                                    <h5>عنوان اسلاید دوم</h5>
                                                                                    <p>محتوای نمایه‌ای نمایشی برای اسلاید دوم.</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="carousel-item">
                                                                                <img src="/images/small/img-10.jpg" class="d-block w-100" alt="...">
                                                                                <div class="carousel-caption d-none d-md-block">
                                                                                    <h5>عنوان اسلاید سوم</h5>
                                                                                    <p>محتوای نمایه‌ای نمایشی برای اسلاید سوم.</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">قبلی</span>
                                                                        </button>
                                                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                            <span class="visually-hidden">>بعدی</span>
                                                                        </button>
                                                                    </div>