bootstrap carousel in wordpress home page showing small images and not responsive

admin管理员组

文章数量:1328893

I am trying to make a carousel on a home page, but images doesn't fit to 100% of the page width, and it doesn't get responsive:

<div id="mainCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#mainCarousel" data-slide-to="1"></li>
        <li data-target="#mainCarousel" data-slide-to="2"></li>
        <li data-target="#mainCarousel" data-slide-to="3"></li>
    </ol>

    <!-- slides image -->
    <?php
    $slides = array(
        "slide0" => "23",
        "slide1" => "26",
        "slide2" => "28",
        "slide3" => "27");
    ?>
    <div class="carousel-inner">
        <?php foreach($slides as $key => $slide) { ?> 
            <div class="carousel-item <?php if($key == "slide0"){echo 'active';} ?>">
                <img class="slide-img" src="<?php
                echo wp_get_attachment_image_url($slide);
                ?>" alt="<?php echo $key; ?>">
            </div>
        <?php } ?>
    </div>

    <!-- Controls -->
    <a class="carousel-control-prev" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

I tried with this CSS Code:

.carousel .carousel-item img.slide-img{
max-width: 100%;
height: auto;
}

the same code i have in another simple web page -not a wordpress project- it works fine (see image bellow), is there any problem with carousels on wordpress ? Thanks

本文标签： bootstrap carousel in wordpress home page showing small images and not responsive