Bootstrap Karuzela – prosty slider

Czas czytania: 2 minut

Wśród wielu ciekawych możliwości jakie oferuje Bootstrap warto wymienić Bootstrap Carousel (karuzelę) czyli bardzo prosty pokaz zdjęć.

Demo

Slider służy do tworzenia galerii przesówających się obrazów. Wbudowany jako plugin jest bardzo prosty w obsłudze i praktycznie do użycia po dodaniu do strony biblioteki Twitter Bootstrap. Potrzebne pliki to z niej to:

• bootstrap.min.css – czyli plik CSS
• jquery.min.js – standardowa biblioteka jQuery przydatna nie tylko przy pracy z bootstrapem
• bootstrap.min.js – „plik z gotowymi rozwiązaniami”

Do użycia karuzeli nie musimy nic już dodatkowo instalować wszystko co jest nam potrzebne już mamy musimy ją jedynie wywołać.

Przykładowa karuzela

W tym celu możemy wykorzystać poniższy kod karuzeli:

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="https://www.aurainweb.pl/wp-content/uploads/2017/01/office4.jpg" alt="Przykłacowy obrazek" style="width:100%;">
        <div class="carousel-caption">
          <h3>Przykłacowy obrazek</h3>
          <p>Pierwszy slide</p>
        </div>
      </div>

      <div class="item">
        <img src="https://www.aurainweb.pl/wp-content/uploads/2017/01/pens.jpg" alt="Długopisy i flamastry" style="width:100%;">
        <div class="carousel-caption">
          <h3>Długopisy i flamastry</h3>
          <p>Drugi slide</p>
        </div>
      </div>
    
      <div class="item">
        <img src="https://www.aurainweb.pl/wp-content/uploads/2017/01/office2.jpg" alt="Biuro" style="width:100%;">
        <div class="carousel-caption">
          <h3>Biuro</h3>
          <p>Trzeci slide</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

W powyższym przykładzie mamy tylko 3 slidy nic jednak nie stoi na przeszkodzie by zwiększyć lub zmniejszyć ich ilość.

Każdy nowy slide to:

      <div class="item">
        <img src="LINK DO OBRAZKA" alt="Przykładowy obrazek" style="width:100%;">
        <div class="carousel-caption">
          <h3>Przykłacowy obrazek</h3>
          <p>Pierwszy slide</p>
        </div>
      </div>

Pierwszy slide (ten od którego zaczynamy wyświetlania) powinien posiadać ustawienie <div class=”item active”>.

Poruszanie się po karuzeli

Za wyświetlanie strzałek umożliwiających przechodzenie do poprzedniego lub następnego slidu, obrazka odpowiada kod:

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

Dodatkowo w powyższym przykładzie dodałam również możliwość swobodnego poruszania się dzięki wskaźnikom pokazującym nie tylko aktualnie na, którym obrazku się znajdujemy, ale także ile jest ich jest można też za ich pomocą przejść do konkretnego slidu.

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

W przykładowej karuzeli został również dodany tekst np.:

<div class="carousel-caption">
     <h3>Biuro</h3>
     <p>Trzeci slide</p>
</div>

Jeżeli chcemy uzyskać efekt bez niego wystarczy usunąć ten fragment kodu.

 

Jak widać karuzela składa się z kilku rożnych elementów, są one ze sobą połączone dzięki #myCarousel, jest to nazwa tej konkretnej karuzeli. Stosując rożne nazwy możemy umieścić na stronie kilka rożnych karuzeli.

Na wygląd slidera (kolor czcionki, zamiana kropek w prostokąty) można wpływać za pomocą CSS, tak więc ostateczny wygląd zależy od nas. Każdy slide może też trochę inaczej wyglądać jest to jednak kwestia indywidualnych zmian.

Warto zwrócić uwagę by użyte obrazki miały takie same wymiary.

Poniżej link do przykładowej karuzeli:

Demo

https://www.aurainweb.pl/2018/02/przykladowe-realizacje-karuzel-css-js/

Powyżej opisany wpis dotyczy kursu z bootstrapa i jest kolejną częścią tutoriala.
https://www.aurainweb.pl/2016/04/frameworki-css-bootstrap/

 

 

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h