Bootstrap carousel problem

HTML & CSS
1

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': ''
            });
        }
    });
2

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

6


3648Γ—2736 2.33 MB

7

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.

8

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