Carousel Image Options

by rdenver6

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<H5>
#1: This is what we're doing now.  Setting image height to specific size and width to 100%, so images are skewing.
</H5>
<div class="wrapper">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://www.bing.com/th?id=OIP.vMzim6XDLrdSDpAv8P6OiwHaG_&w=154&h=145&c=7&o=5&pid=1.7" alt="Slide 1">
      <div class="carousel-caption">
        Caption Slide 1
      </div>
    </div>
    <div class="item">
      <img src="https://www.bing.com/th?id=OIP.A-kL-QtkEKWc9JjSqgtTpgHaE6&w=298&h=197&c=7&o=5&pid=1.7" alt="Slide 2">
      <div class="carousel-caption">
        Caption Slide 2
      </div>
    </div>
    <div class="item">
      <img src="https://www.bing.com/th?id=OIP.Eam7qBtgwSFk1rGsJXlfxAAAAA&w=250&h=197&c=7&o=5&pid=1.7" alt="Slide 3">
      <div class="carousel-caption">
        Caption Slide 3
      </div>
    </div>   
     <div class="item">
      <img src="https://www.bing.com/th?id=OIP.z-tx9aPz-Xb4yzSVEDST8gAAAA&w=143&h=150&c=7&o=5&pid=1.7" alt="Slide 4">
      <div class="carousel-caption">
        Caption Slide 4
      </div>
    </div>   
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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...

CSS

/* for testing only */
.wrapper, .wrapper2, .wrapper3 {width: 400px}
.wrapper img {width:100%; height: auto;}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {height:250px;
object-fit:cover;}

.bgImage {
  background-repeat: no-repeat;
  height:250px;
  background-size:cover;
  background-position: center center;
}
#image1 {
  background-image: url('https://www.bing.com/th?id=OIP.vMzim6XDLrdSDpAv8P6OiwHaG_&w=154&h=145&c=7&o=5&pid=1.7');
}
#image2 {
  background-image: url('https://www.bing.com/th?id=OIP.A-kL-QtkEKWc9JjSqgtTpgHaE6&w=298&h=197&c=7&o=5&pid=1.7');
}
#image3 {
  background-image: url('https://www.bing.com/th?id=OIP.Eam7qBtgwSFk1rGsJXlfxAAAAA&w=250&h=197&c=7&o=5&pid=1.7');
}
#image4 {
  background-image: url('https://www.bing.com/th?id=OIP.z-tx9aPz-Xb4yzSVEDST8gAAAA&w=143&h=150&c=7&o=5&pid=1.7');
}

.bgImage2 {
  background-repeat: no-repeat;
  height:250px;
  background-size:cover;
}
#image1-focused {
  background-image: url('https://www.bing.com/th?id=OIP.vMzim6XDLrdSDpAv8P6OiwHaG_&w=154&h=145&c=7&o=5&pid=1.7');
  background-position: center center;
}
#image2-focused {
  background-image: url('https://www.bing.com/th?id=OIP.A-kL-QtkEKWc9JjSqgtTpgHaE6&w=298&h=197&c=7&o=5&pid=1.7');
  background-position: top center;
}
#image3-focused  {
  background-image: url('https://www.bing.com/th?id=OIP.Eam7qBtgwSFk1rGsJXlfxAAAAA&w=250&h=197&c=7&o=5&pid=1.7');
  background-position: top right;
}
#image4-focused  {
  background-image: url('https://www.bing.com/th?id=OIP.z-tx9aPz-Xb4yzSVEDST8gAAAA&w=143&h=150&c=7&o=5&pid=1.7');
  background-position: top left;
}