问题描述:

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

网友答案:
  • 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">

相关阅读:
Top