CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Kate
Kate

Reputation: 15

Using different sized images on carousel in bootstrap for different device sizes

So I don't know what the best practice would be to solve my problem. I'm making a webpage with a large edge-to edge carousel that sits below the navbar and looks great on desktops with a 1:3 ratio image size. On mobile, it looks too small and thin so I made a new set of images with a 2:3 ratio size I want to display on smaller screens in my carousel.

How should I go about doing this? Javascript to change the images on different sizes? Hidden columns for the carousel on different port sizes with one for mobile and one for desktop? I just need to know the way that makes most sense/best practices to solve this problem.

My carousel HTML for point of reference:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <!--<li data-target="#myCarousel" data-slide-to="3"></li>   optional   -->
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="img/carousel/carousel1.jpg" alt="First slide">
    </div>
    <div class="item">
      <img class="second-slide" src="img/carousel/carousel2.jpg" alt="Second slide">
    </div>
    <div class="item">
      <img class="third-slide" src="img/carousel/carousel3.jpg" alt="Third slide">
    </div>
  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

Upvotes: 1

Views: 1202

Answers (1)

Tim Troiano
Tim Troiano

Reputation: 447

Here's a possible solution using @MediaQueries.

You create two different carousels in the HTML and define which one to display using media queries. You can customize the CSS for each carousel individually to get the sizing correct.

Bootply Example - Change the width of the window to below / above 1000px to see it update.

HTML

<div class="container">
  <div class="span8">
    <div id="myCarousel" class="carousel slide wide">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item">
          <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
          <div class="carousel-caption">
            <h4>First Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item active">
          <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
          <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item">
          <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
          <div class="carousel-caption">
            <h4>Third Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
    <div id="myCarouselNarrow" class="carousel slide narrow">
      <ol class="carousel-indicators">
        <li data-target="#myCarouselNarrow" data-slide-to="0" class=""></li>
        <li data-target="#myCarouselNarrow" data-slide-to="1" class="active"></li>
        <li data-target="#myCarouselNarrow" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item">
          <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
          <div class="carousel-caption">
            <h4>First Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item active">
          <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
          <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="item">
          <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
          <div class="carousel-caption">
            <h4>Third Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarouselNarrow" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarouselNarrow" data-slide="next">›</a>
    </div>
  </div>
</div>

CSS

.wide {
  width: 600px;
}

.narrow {
  width: 480px;
  display: none;
}

@media (max-width: 1200px) {
  .wide {
    display: none;
  }
  .narrow {
    display: block;
  }
}

Upvotes: 1

Related Questions