CODEWITHSUNDEEP
htmlbootstrap-4bootstrap-carousel
Aenaon
Aenaon

Reputation: 3573

How do I style this bootstrap carousel?

I have this bootstrap carousel(v4) and I want to change its style, mainly its margins. I am actually hiding the main part of the carousel and I am keeping the thumbnails only because I want eventually to end-up with something like a thumbnail slider only.

I dont know however how to get rid of all the space around it (a few pixels padding would be fine...). Also, how do I make the thumbnails bigger please?

Many thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Carousel</title>

    <!--jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style>
body {
    background-color: #CACACA
}

.container {
    margin-top: 100px;
    margin-bottom: 100px
}

.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators>li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

.carousel-item img {
    width: 80%
}
  </style>
</head>
<body style="margin:0; padding:0;">


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" align="center">
                <!-- slides -->
                <div class="carousel-inner" style="display: none;">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div>

              <!-- Thumbnails -->
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-3" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<script>

$(document).ready(function () {
  $('#custCarousel').on('slide.bs.carousel', function (e) {
    console.log('Showing picture ' + e.to)
  });
});
</script>
</body>
</html>

Upvotes: 0

Views: 875

Answers (1)

ellitt
ellitt

Reputation: 833

Really, you're trying to use this carousel in a way that it wasn't intended to be used so it's going to be an uphill battle to get it to work like you want. Hiding the main image means the thumbnails are still going to be centered because that's how the carousel is intended to work.

The thumbnails themselves can be bigger if you change this to something larger than 100px: 

#custCarousel .carousel-indicators>li {
    width: 100px
}

To scoot the thumbnails to the left and out of the middle you need to do something like this:

.carousel-indicators {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
}

Upvotes: 1

Related Questions