ساخت اسلایدر با بوت استرپ (html و css) – بدون جاوا اسکریپت

اسلایدر با بوت استرپ bootstrap – فریمورک bootstrap علاوه بر کلاس های کاربردی component های کار آمد

از جمله carousel را به ما می دهد که در ساخت یک Slider تاثیر گذار است .

در دموی پایین شاهد کارکرد اسلایدر خواهید بود :

دموی اسلایدر

صفحه index.html


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        <a class="text-center" id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <div id="silder-demo" class="carousel slide w-25 m-auto" data-bs-ride="false">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#silder-demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#silder-demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#silder-demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner rounded">
              <div class="carousel-item active">
                <img src="https://rapidcode.ir/wp-content/uploads/2022/11/tga-1667932374-cmp.png" class="d-block w-100" alt="...">
                <div class="carousel-caption">
                  <h5 class="text-danger">اسلاید شماره 1</h5>
                  <p class="bg-primary">ساخت اسلایدر با بوت استرپ</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://rapidcode.ir/wp-content/uploads/2022/11/tga-1667813094-cmp.png" class="d-block w-100" alt="...">
                <div class="carousel-caption">
                  <h5>اسلاید شماره 2</h5>
                  <p>ساخت اسلایدر بدون جاوا اسکریپت</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://rapidcode.ir/wp-content/uploads/2022/11/tga-1667894474-cmp.png" class="d-block w-100" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#silder-demo" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#silder-demo" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>

       
    </div>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
   
</body>
</html>

css برای شخصی سازی بیشتر

.carousel-indicators .active{
    background-color: lime;
}

دانلود سورس اسلایدر با بوت استرپ

درصورتی که میخواهید اسلایدر های حرفه با جاوا اسکریپت بسازید می توانید از این آموزش استفاده کنید .

ساخت اسلایدر با بوت استرپ (html و css) – بدون جاوا اسکریپت

دموی اسلایدر

صفحه index.html

css برای شخصی سازی بیشتر

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ