CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Akshay Sargar
Akshay Sargar

Reputation: 47

bootstrap carousel not displaying images

my carousel is not displaying images .I have 3 images stored in folder name images.I am using bootstrap 4 ,let me know what is wrong.I also wanted to know if I am suppose to insert images below 900*500 resolution.

1-ronald.jpg of 634 * 424 then

2-messi.jpg of 594 *432 and last

3-pogba.jpg of 620 * 348 resolution

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

 <style type="text/css">


.carousel-inner > .carousel-item > img {
        padding-top:35px;
    margin: 0 auto;
    border-radius: 10px 10px 10px 10px;
    
    max-height: 500px;
    width: 750px;  
   
}



.carousel-control.left, .carousel-control.right {
    background-image: none;


}
#carousel
{
  margin-bottom: 50px;

}
</style>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img data-src="images/ronaldo1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img data-src="images/pogba.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img data-src="images/messi.jpg" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
    <script language="JavaScript" type="text/javascript">

Upvotes: 1

Views: 7411

Answers (3)

Abhijit Jagtap
Abhijit Jagtap

Reputation: 2702

@yuriy636 solution is working fine and if not working yet then check image permission. may be some time if file dont have permission then browser unable to load that file.

Upvotes: 0

yuriy636
yuriy636

Reputation: 11661

In your <img> tags

 <img data-src="images/pogba.jpg" alt="Second slide">

change data-src to just src.

 <img src="images/pogba.jpg" alt="Second slide">

That way the markup can find the image.

data- is used for storing plain data text.

Check working JSFiddle.

Upvotes: 1

singe batteur
singe batteur

Reputation: 400

Try including the tether.min.js script before you include the bootstrap.min.js script.

How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)'

Upvotes: 0

Related Questions