• 25-02-2021, 05:36:17
    #1
    Konuya giren herkese merhaba bilgilerimi geliştirme amaçlı bootstraptan site tasarımı yapıyordum fakat bir yerde tıkandım. Numaralı haber sliderı yapmak istiyorum numaraları da koydum fakat butonlar image genişliğine kadar çekemedim yardımcı olur musunuz?

    HTML

    <div class="col-sm-8 slider">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">1</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3">4</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="4">5</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="5">6</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="6">7</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="7">8</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="8">9</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="9">10</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="10">11</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="11">12</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="12">13</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="13">14</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="14">15</li>
    </ol>

    <div class="carousel-inner">
    <div class="carousel-item active">
    <a href="#"><img class="d-block w-100" src="images/değerlendirme.jpg" alt="First slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="http://placehold.it/1000x550" alt="Second slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="http://placehold.it/1000x550" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    <div class="carousel-item">
    <a href="#"><img class="d-block w-100" src="images/3463389.jpg" alt="Third slide"></a>
    </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>

    </div>

    CSS

    .carousel-indicators li {
    background-color: #828282;
    color: #000000;
    font-size: 14px;
    text-indent: 0;
    text-align: center;
    width:30px;
    height: 25px;
    }
    .carousel-indicators{
    top: 0;
    bottom: auto;
    justify-content: flex-start;
    display: flex;
    margin-top: 520px;
    margin-left: 200px;
    }

  • 25-02-2021, 05:46:31
    #2
    swiper kullanırsanız daha sağlıklı olur hocam kullanışı oldukça basittir;

    https://swiperjs.com/demos#pagination-custom