How can I make my images responvise inside of a Bulma carousel?

  bulma, css, html, javascript

I am working on a project which requires me to make a responsive site using Bulma where I can. I was able to implement a carousel and some sample text/images. However, it appears that unlike the carousel itself, the images within the carousel are not responsive. How can I make it so that everything within the carousel is responsive, along with the rest of the site?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Console Picker</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="assets/styles/bulma-carousel.min.css">
    <link rel="stylesheet" href="assets/styles/styles.css">
  </head>
  <body>
    <section class="hero">
        <div class="hero-body">
          <p class="title">
            Console Picker
          </p>
          <p class="subtitle">
            Customize the Newest and Best Consoles That Suit You Best
          </p>
        </div>
      </section>

      <!-- <section class="section">
        <div class="container"> -->
          <!-- Start Carousel -->
        <div class="box">
          <div id="carousel-demo" class="carousel">
            <div class="item item-1">
              <!-- Slide Content -->
              <p class="caption has-text-centered is-size-5-mobile">
                Sample Text
              </p>
              <img class="carousel-pic" src="https://i.picsum.photos/id/523/200/300.jpg?hmac=QriXiPxFy9-cMkF-FT75nsGiR-WfIvH1wg1tYx3fpJA" alt="placeholder">
            </div>
            <div class="item item-2">
              <!-- Slide Content -->
              <p class="caption has-text-centered is-size-5-mobile">
                Sample Text
              </p>
              <img class="carousel-pic" src="https://i.picsum.photos/id/523/200/300.jpg?hmac=QriXiPxFy9-cMkF-FT75nsGiR-WfIvH1wg1tYx3fpJA" alt="placeholder">
            </div>
            <div class="item item-3">
              <!-- Slide Content -->
              <p class="caption has-text-centered is-size-5-mobile">
                Sample Text
              </p>
              <img class="carousel-pic" src="https://i.picsum.photos/id/523/200/300.jpg?hmac=QriXiPxFy9-cMkF-FT75nsGiR-WfIvH1wg1tYx3fpJA" alt="placeholder">

            </div>
          </div>
        </div>
          <!-- End Carousel -->
        <!-- </div>
      </section> -->

      <div class="container is-fluid">
        <div class="notification">
          This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
          viewport size. This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
          viewport size. This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
          viewport size. This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
          viewport size. This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
          viewport size. This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
          viewport size.
        </div>
      </div>

      <div class="box">
        <div id="selectsDiv">
        </div>
        <img id="consolePicture" />
      </div>

      
       
    <script src="assets/scripts/bulma-carousel.min.js"></script>
    <script src="assets/scripts/bulmaAttach.js"></script>
    <script src="assets/scripts/selectData.js"></script>
    <script src="assets/scripts/createSelects.js" ></script>
  </body>
</html>

CSS:

html{
    scroll-behavior: smooth;
}

body {
    background-color: #16448b;
    overflow-x: hidden;
}


select {
   width: 10em;
   font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 
   "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: large;
}

#selectsDiv {
    background-color: aqua;
    text-align: center;

}

.title, .subtitle {
    text-align: center;
    color: #b4b4ed;
}

.hero {
    background-color: #333343;
}

.box {
    background-color: #747498;
}

.container {
    overflow: hidden;
    padding-bottom: 1.5em;
}

.notification {
    background-color: #333343;
    text-align: center;
    color: #b4b4ed;
}

.carousel-pic {
    width: 15%;
    display: flex;
    justify-content: center;
}

.item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caption {
    position: absolute;
    width: 100%;
    color: red;
}

And if needed, for whatever reason, all JS files relating to the carousel:

bulmaCarousel.attach('#carousel-demo', {
    autoplay: true,
    autoplaySpeed: 7000,
    infinite: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    breakpoints:    [{ changePoint: 480, 
      slidesToShow: 1, 
      slidesToScroll: 1 
    }, { 
        changePoint: 640, 
        slidesToShow: 1, 
        slidesToScroll: 1 
      }, { 
          changePoint: 768, 
          slidesToShow: 1, 
          slidesToScroll: 1 } ],
          infinite: true,
          duration: 500
  });

Additional files for Bulma Carousel implementation can be found here (too big to link):
https://github.com/Wikiki/bulma-carousel/tree/master/dist/js
https://github.com/Wikiki/bulma-carousel/tree/master/dist/css

Source: Ask Javascript Questions

LEAVE A COMMENT