CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
pene1988
pene1988

Reputation: 21

How to fix carousel, after each transition the image seems to jump. ie the whole frame gets smaller then bigger

I am really new to code and bootstrap and dreamweave. I added a carousel to the website I am building, which was working really well, but I must of done something, and now the images lose the bottom half of the image, when auto scrolling and when I click scroll right but not when I scrolling left. 

<div id="carousel1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img src="images/Slider and gallery/img_1_blank.jpg" alt="image of neat 3.0KW (12 panel) solar system, on sandstone house with black tin roof and blue skys" width="992" height="282" class="center-block">
      <div class="carousel-caption">
        <h3>First slide Heading</h3>
        <p>First slide Caption</p>
      </div>
    </div>
    <div class="item"><img src="images/Slider and gallery/img_2_blank.jpg" width="992" height="282" alt="" class="center-block">
      <div class="carousel-caption">
        <h3>Second slide Heading</h3>
        <p>Second slide Caption</p>
      </div>
    </div>
    <div class="item"><img src="images/Slider and gallery/img_3_blank.jpg" width="992" height="282" alt="" class="center-block">
      <div class="carousel-caption">
        <h3>Third slide Heading</h3>
        <p>Third slide Caption</p>
      </div>
    </div>
  </div>
<a class="left carousel-control" href="#carousel1" 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="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

Please let me know if you need any further info. Thanks in advance

Upvotes: 2

Views: 2150

Answers (1)

JF-Mechs
JF-Mechs

Reputation: 1081

  • First of all remove the width and height inline on the DIV element.

    create a css class in your main.css file that will have this css property then call that class in the html element, but I suggest you don't use fix widths if you wanted to make your website responsive unless you're going to implement media queries. In my case, I create a custom css class that looks like this.

    .carousel-img-item { width: 100%; height: 500px}

  • Second remove the class center-block.

    • the css class .center-block was adding a css property min-height which partly causes the image to lose its bottom half.

Your html code now should look like this.

<img src="images/Slider and gallery/img" class="carousel-img-item">

Upvotes: 1

Related Questions