CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsharepointcarousel
Imrik
Imrik

Reputation: 664

Change carousel width

I have a carousel that shows different types of images. They have different widths and heights. I'm using bootstrap carousel.

With the heights, there is no problem, it changes when the image showed changes. But with the width, it always has the same (too big than all the images, as you can see on the screenshot):

enter image description here

My carousel code is the next:

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" margin: 0 auto">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <asp:Repeater ID="repeaterImages" runat="server">
            <ItemTemplate>
                <div class="carousel item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                    <asp:Image ID="Image1" ImageUrl='<%# Eval("FileName") %>' runat="server" />
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div>

Any ideas of what I have to do to have a width that changes depending on the image? Why it is changing the height but not the width?

Thanks a lot!

Upvotes: 0

Views: 3573

Answers (3)

Oliver
Oliver

Reputation: 1

Bootstrap - inline style <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 80%;">

or class="carousel slide w-75"

Upvotes: 0

Imrik
Imrik

Reputation: 664

I fix it adding this on my css:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

Upvotes: 1

AlbertK
AlbertK

Reputation: 13167

Changing carousel height according to image height is a more common scenario whereas changing carousel width is more specific scenario. I think that is why it is implemented like this by default. And usually the best approach is to prepeare your images to have a same size hence in this case you don't have to care about changing carousel size.

However you can change carousel width using Carousel Events:

$('#carouselExampleControls').on('slid.bs.carousel', resizeCarousel);
$(document).ready(resizeCarousel);

function resizeCarousel(){
    var imgWidth = $('.carousel-item.active img').width();
    $('#carouselContainer').width(imgWidth);
}

See an example

Upvotes: 0

Related Questions