-1

how do I create a carousel that is responsive with the width of the browser or device, keeps the aspect ratio of the images it contains and also stays responsive with the height of the image as it shrinks when you reduce the size of the browser...

I would like the carousel to centre on the page when the image is at its largest width.

I this is my code so far, I will post my web address below to give a full illustration of how it behaves;

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  color: #FFD700;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}


.carousel-inner > .item > img {
  position: absolute;
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}

.carousel-indicators li {
  background-color: #999;
}

.carousel-indicators li:hover {
  background-color: #444;
}

.carousel-indicators .active {
  background-color: #666;
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
    font-size: 100px;
    color: blue;
    margin-top: -70px
}

/* RESPONSIVE CSS
-------------------------------------------------- */

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 25px;
    line-height: 1.4;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide under-nav" 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>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="http://buzzingbikes.com/static/img/road_bike.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>A Boost Of Power</h1>
              <p>Checkout our new stock! Nothing feels better than the wind blasting past your streaming eyes, like our lightweight Road bike frames!</p>
              <p><a class="btn btn-lg btn-primary" href="{% url 'products' %}" role="button">Check 'em out!</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="http://buzzingbikes.com/static/img/ehline3.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Take It To Another Level</h1>
              <p>With out streamlined beautifully slick and super fast range you'll get from A to B in no time at all!</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="http://buzzingbikes.com/static/img/New-36V-350-Watt-Lithium-Battery-Electric-Snow-Bike-Electric-Bicycle-SHIMAN0-21-Speed-Mountain-Bike.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <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>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

I really need help, I have searched high and low and cant find a simple answer...

my website is http://buzzingbikes.com/

play around with the size of the browser to get an idea of what I'm up against...

Do I need to use javascript and if so what do I need to do?

I'd appreciate any help to get this working correctly...

Thanks everyone

Chris Stone
  • 129
  • 3
  • 15

1 Answers1

2

Yes, sys.getsizeof does what you require. See https://docs.python.org/3/library/sys.html#sys.getsizeof for more details. Of course, you need to import sys before you can call it!

For example:

>>> import sys
>>> sys.getsizeof('short')
42
>>> sys.getsizeof('a very long and convoluted string')
70

As you see, getsizeof also informs you about overhead related to the object you're passing to it -- so e.g the string 'short' overall consumes 42 bytes, not just the 5 bytes of its characters (in Python 3, sys.getsizeof('short') returns 54 -- there, it's a Unicode string, so it consumes more space than in Python 2 where it's a byte string!-)

Alex Martelli
  • 854,459
  • 170
  • 1,222
  • 1,395