Bootstrap 4 carousel nieresponsywny

Chyba nie ma dzisiaj programisty stron internetowych, który w swojej pracy nie wykorzystuje Bootstrapa, czy innych framework’ow do responsywnego tworzenia stron www.

Mogłoby się wydawać, że tworzymy zgodnie z nomenklaturą i zasadami bootstrapa i nasza strona będzie idealnie dopasowana do każdej przeglądarki. I tak rzeczywiście jest, z jednym małym wyjątkiem. Pierwszy raz się natrafiłem na element Bootstrapa, który nie jest responsywny. Aż nie chce się wierzyć, ale tak jest. Mowa o module carousel (karuzela).

Wszystko pięknie działa i nie trzeba się specjalnie silić, aby uruchomić pokaz obrazków. Jednak na pomniejszonym ekranie nie ma to nic wspólnego z responsywnością. Pokaz slidów dział, ale obrazek nie zachowuje proporcji w zależności od okna przeglądarki. Naprawdę trochę to dziwne, żeby edytować kod bootstrapa, żeby był responsywny.

Skrypt Bootstrap 4 carousel

Oryginalny skrypt wygląda tak:


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>


<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>


<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

  </ol>


<div class="carousel-inner" role="listbox">

<div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>


<div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>


<div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Wystarczy podać odpowiednią lokalizacje obrazków i mamy gotowe. Jak już wspomniałem, przy dużej rozdzielczości ekranu jest idealnie i nie ma problemu, przy skalowaniu zaczyna się problem.

Widok przy dużej rozdzielczości:

carousel-full

Widok przy małej rozdzielczości ekranu:

carousel-small

Nie da się ukryć, że chyba nie o to chodzi w responsywności. Jednak nie wiem, dlaczego Boostrap takie rzeczy tworzy. No ale można to dość prosto zmienić.

Edycja kodu źródłowego

Moim celem, jest tak ustawić slider, aby przy skalowaniu zachował wysokość pierwotnego zdjęcia, natomiast dostosował szerokość i pokazał tylko tyle ile pozwala ekran bez skalowania całościowego.

Dlatego z kody wyrzycamy nasze znaczniki img i w to miejsce wrzucamy nowe „divy”. Po edycji nasz kod powinien wyglądać następująco:


<div class="carousel-item">

<div class="ewd-slide slide-three"></div>


<div class="carousel-caption">

<h3>Third slide</h3>



This is the third slide.

        </div>

    </div>

Moje wszystkie obrazki są szerokości 1920px a wysokość to 500px. Więc wiem, że moja wysokość będzie 500px. Można to jeszcze zmienić i w js napisać, skrypt, żeby nasza wysokość również się zmniejszała w zależności od szerokości okna. Ale w tym przypadku, chce mieść zawsze 500px wysokości.

Nasz skrypt css dla nowo utworzonego diva powinien mieść taką strukturę:

.ewd-slide
{
	width:100%;
	height:500px;
	
}
.slide-three
{
	background-image:url(three.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}

Efektem naszej przeróbki będzie o wiele lepszy efekt

carousel-rwd

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code