Akshay Sargar Akshay Sargar - 4 months ago 23
HTML Question

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-example
{
height:500px;
width:100%;
}
</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">




Answer

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.