bootstrap carousel not displaying images

Question

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">

on running you snippet i see Bootstrap tooltips require Tether error, have you included the required file for tether? — Deep, Jul 15 '16 at 17:30
nothing is there in the script tags.It is just opened and closed. — Akshay Sargar, Jul 15 '16 at 17:32

score 1 · Accepted Answer · answered Jul 15 '16 at 17:33

1

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.

answered Jul 15 '16 at 17:33

yuriy636

11,171
5
37
42

hey worked fine Thanks , but the images appear to the extreme top left corner any idea how to bring them in center. – Akshay Sargar Jul 15 '16 at 17:36
Check https://jsfiddle.net/fy9rfg22/1/ added a new CSS rule. Also if you want to center them vertically too, you can get rid of the "height" in the first rule, so it fits the image automatically. – yuriy636 Jul 15 '16 at 17:40
I have edited css to get rounded corners on images.I have added border-radius but it doesn't apply to the top side of the image.Any help you can give.Thanks. – Akshay Sargar Jul 16 '16 at 05:02

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

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/)'

edited May 23 '17 at 12:22

Community

1
1

answered Jul 15 '16 at 17:30

singe batteur

401
2
14

score 0 · Answer 3 · answered Jul 15 '16 at 17:48

0

@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.

answered Jul 15 '16 at 17:48

Abhijit Jagtap

2,740
2
29
43

bootstrap carousel not displaying images

3 Answers3