0

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 enter image description here

2
  • 1
    You are getting the url to the thumbnail size of the attachment. Just add the second parameter to your call to wp_get_attachment_image_url($slide, 'full');
    – Abhik
    Commented Jul 14, 2020 at 17:47
  • thanks a lot #Abhik, it works ^_^
    – Hind Dev
    Commented Jul 14, 2020 at 17:49

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.