Bootstrap carousel problem

Does anybody know why the images become Blurry?

HTML

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Carousel Full Screen</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container-full top" id="first">
    <nav class="navbar navbar-default" id="main">
      <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img src="images/joez.png" class="img-responsive">
          </div>
          <div id="navbar5" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="btn-lg" id="inside"><h3>За мен </h3></a></li>
                <li><a href="#" class="btn-lg" id="inside"><h3>Галерия</h3></a></li>
                <li><a href="#" class="btn-lg" id="inside"><h3>Продукти</h3></a></li>
                <li><a href="#" class="btn-lg" id="inside"><h3>Контакти</h3></a></li>
            </ul>
          </div>
      </div>
    </nav>
  </div>
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
      <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
      <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
    </ol>
  <div class="carousel-inner">
    <div class="item" style="">
      <img src="images/masaedno.jpg" alt="" class="">
      <div class="carousel-caption">  
        <div class="row">
          <div class="col-md-12 text-center middle"><h3>Стилни, уникални, персонални</h3></div>
        </div>
          <div class="row">
            <div class="col-md-12 text-center big"><h1>Уникални мебели</h1></div>
          </div>
      <div class="row">
        <div class="col-md-12 text-center small"><h4>Мебелите, на които ще придадем уникалност. <br>Тук ще намерите всичко за проектирането и обзавеждането на Вашия дом.</h4></div>
      </div>                 
        <div class="row">
          <div class="col-md-12 text-center buttons inpage-scroll link btn-xs">
            <a href="#works" class="btn" id="onelink"><h4>Контакти</h4></a>
            <a href="#pricingtable" class="btn " id="twolinks"><h4>Продукти</h4></a>
          </div>
        </div>                
    </div>
  </div>

  <div class="item active">
    <img src="images/sekcia.jpg" alt="" class="">
    <div class="carousel-caption">
      <div class="row">
        <div class="col-md-12 text-center middle"><h3>Стилни, уникални, персонални</h3></div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center big"><h1>Уникални мебели</h1></div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center small"><h4>Мебелите, на които ще придадем уникалност. <br>Тук ще намерите всичко за проектирането и обзавеждането на Вашия дом.</h4></div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center buttons inpage-scroll link btn-xs">
          <a href="#works" class="btn" id="onelink"><h4>Контакти</h4></a>
          <a href="#pricingtable" class="btn " id="twolinks"><h4>Продукти</h4></a>
        </div>
      </div>
    </div>
  </div>

  <div class="item" style="">
    <img src="images/legloedno.JPG" alt="" class="">
    <div class="carousel-caption">
      <div class="row">
        <div class="col-md-12 text-center middle"><h3>Стилни, уникални, персонални</h3></div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center big"><h1>Уникални мебели</h1></div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center small"><h4>Мебелите, на които ще придадем уникалност. <br>Тук ще намерите всичко за проектирането и обзавеждането на Вашия дом.</h4></div>
      </div>                 
        <div class="row">
          <div class="col-md-12 text-center buttons inpage-scroll link btn-xs">
            <a href="#works" class="btn" id="onelink"><h4>Контакти</h4></a>
            <a href="#pricingtable" class="btn " id="twolinks"><h4>Продукти</h4></a>
          </div>
        </div>  
      </div>
    </div>
      
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center" id="heading"><h1>МЕБЕЛИ JOEZ</h1></div>
  </div>
</div>

<div class="container">
    <nav class="navbar navbar-default">
        <div class="container" id="color">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#"><span>Антре</span></a></li>
                    <li><a href="#"><span>Всекидневни</span></a></li>
                    <li><a href="#"><span>Кухни</span></a></li>
                    <li><a href="#"><span>Легла</span></a></li>
                    <li><a href="#"><span>Магазини</span></a></li>
                    <li><a href="#"><span>Гардероби</span></a></li>
                    <li><a href="#"><span>Маси</span></a></li>
                    <li><a href="#"><span>Ниши</span></a></li>      
                </ul>
            </div>
        </div>
    </nav>
  <div id="source-button" class="btn btn-primary btn-xs" style="display: none;">&lt; &gt;</div>
</div>




<div class="container-fluid contacts text-center">
  <div class="row">
    <div class="col-lg-12"><h4 class="strike"><span>Контакти</span></h4>
    </div>
</div>
</div>
<footer class="mojFooter" id="last">
  <font face="Roboto Condensed" size="4"> 
    <center>
      <div class="container">
        <div class=" row bottom-footer">
          <div class="col-md-12 text-center buttons inpage-scroll">
            <a href="https://www.facebook.com/profile.php?id=100000271750826&pnref=friends.search/"><h4 id="nested">Facebook</h4></a>
          </div>
        <div class=" row bottom-footer">
          <div class="col-md-12 text-center buttons inpage-scroll">
            <h4 id="nested">Телефон: +359(0)877 56 45 13</h4></a>
          </div>
       </div>
       <div class=" row bottom-footer">
          <div class="col-md-12 text-center buttons inpage-scroll">
            <h4 id="nested">+359(0)899 82 81 17;</h4></a>
          </div>
       </div>
       <div class=" row bottom-footer">
          <div class="col-md-12 text-center buttons inpage-scroll">
            <h4 id="nested">Имейл: joez@abv.bg;</h4></a>
          </div>
       </div>
    </center>
  </font> 
</footer>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

CSS

.top .navbar-brand {
    display: flex;
    align-items: center;
}
.top .navbar-brand>img {
    padding: 7px 14px;
}
.navbar-header>img{
    width:200px;
}
#first{
    margin-top: 1em;
}
#inside{
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}
#inside>h3{
    color: #000;
}
#main{
    border: none;
    background-color: #fff;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    height: 450px;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    line-height: 1;
    }
#onelink,#twolinks{
    color: #fff;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    text-decoration: none;
    background-color:#a3a375;
    border: none;
}
.middle{
    color: #fff;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}
.big{
    color: #fff;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}
.small{
    color: #fff;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}
#heading{
    color: #000;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}


.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
ul>li>a>span{
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    color:#fff;
    font-size:2.3em;
}
#color{
    border:none;
    background-image: url(../images/wood_floor_parquet_20120518_1128942492.jpg);
    background-position: center center;
    background-size: cover; 
}
.contacts{
    height: 4em;
    background-color: #000;
    vertical-align: middle;
}
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    color:#fff;
    padding-bottom: 0.5em;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #808080;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}
footer {
  position:relative;
  bottom: 0;
 }
#last{
    height: 13em;
    background-image: url(../images/black-parquet_1194-6245.jpg);
}
#nested{
    color: #fff;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    text-decoration:#fff;
    border:none;
    padding-bottom:0em;
}

JS

$('#myCarousel').carousel();
    var winWidth = $(window).innerWidth();
    $(window).resize(function () {

        if ($(window).innerWidth() < winWidth) {
            $('.carousel-inner>.item>img').css({
                'min-width': winWidth, 'width': winWidth
            });
        }
        else {
            winWidth = $(window).innerWidth();
            $('.carousel-inner>.item>img').css({
                'min-width': '', 'width': ''
            });
        }
    });

Without having access to the images themselves, I’m not sure we’ve any way of telling.



Hi @juri80, images may become blurry when not displayed at the exact size of the image. You can resize your images with Gimp, Photoshop or other software to better fit the display size.

Can you please post a link to your test site, if you have one.

Also, please examine your HTML page with the HTML validator.
http://validator.w3.org/

There are several errors, most notably duplicate IDs (there can be only one per page) and mismatched tags (an open div without a close div and close anchors without open anchors).

The CSS shows no errors in the CSS validator.

The problem with your page is not clear because I do not know what exactly is blurry and at what sizes. For example, if the smaller images are being enlarged and used as slides, they will be blurry because any image that is displayed at a larger-than-native size necessarily become fuzzy. That’s physics. Software can algorithmically sharpen a small amount of blurriness but only Hollywood movies can make them look super sharp.

The images are also being stretched out of their normal aspect ratio so they look wider or narrower than normal. Properly chosen images and a properly configured slider will preserve their aspect ratio while cropping them or resizing them or both so they continue to look professional.

2 Likes