Bootstrap - Carousel


Kreiranje Carousel-a pomoću Bootstrap-a

Carousel poznat i kao dijaprojekcija ili klizač slika jedan je od najboljih načina prikazivanja ogromne količine sadržaja na malom prostoru na web stranicama. To je dinamična prezentacija sadržaja u kojoj se tekst i slike čine vidljivim ili dostupnim korisniku kruženjem kroz nekoliko stavki. Sljedeći primjer će vam pokazati kako da napravite jednostavan Carousel kao što je rotiranje slika ili dijaprojekcija pomoću dodatka za Carousel.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indikatori -->
    <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>
    <!-- Omot za Carousel artikle -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/slide1.png" alt="Prvi Slider">
        </div>
        <div class="carousel-item">
            <img src="img/slide2.png" alt="Drugi Slide">
        </div>
        <div class="carousel-item">
            <img src="img/slide3.png" alt="Treći Slide">
        </div>
    </div>
    <!-- Carousel kontrole-->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Carousel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel-item{
    text-align: center;
    min-height: 280px; /* Spriječite da se Carousle izobliči ako se iz nekog razloga slika ne učita */
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Carousel indikatori -->
      <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>
      <!-- Omot za Carousel artikle -->
      <div class="carousel-inner">
          <div class="carousel-item active">
              <img src="img/slide1.png" alt="Prvi Slider">
          </div>
          <div class="carousel-item">
              <img src="img/slide2.png" alt="Drugi Slide">
          </div>
          <div class="carousel-item">
              <img src="img/slide3.png" alt="Treći Slide">
          </div>
      </div>
      <!-- Carousel kontrole-->
      <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#myCarousel" data-slide="next">
          <span class="carousel-control-next-icon"></span>
      </a>
    </div>
</div>
</body>
</html>

Pogledaj gotove primjere koje možete kreirati uz pomoć Carousels-a:



Aktivirajte Carousels putem atributa podataka (Data Attributes)

Uz Bootstrap možete vrlo lako kreirati Carousels preko atributa podataka bez pisanja ijednog reda JavaScript koda. Pogledajmo sljedeći primjer:

<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
    <!-- Carousel indikator-->
    <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>
    <!-- Omot za Carousel artikle -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/slide1.png" alt="Prvi Slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>HTML</h5>
                <p>HyperText Markup Language</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide2.png" alt="Drugi Slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>CSS</h5>
                <p>Cascading Style Sheets</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide3.png" alt="Treći Slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>Bootstrap</h5>
                <p>Front-end framework</p>
            </div>
        </div>
    </div>
    <!-- Carousel kontrole -->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aktiviranje Carousel putem atributa podataka u  Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel-item{
    text-align: center;
    min-height: 280px; /* Spriječite da se Carousle izobliči ako se iz nekog razloga slika ne učita */
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
    <!-- Carousel indikator-->
    <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>
    <!-- Omot za Carousel artikle -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/slide1.png" alt="Prvi Slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>HTML</h5>
                <p>HyperText Markup Language</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide2.png" alt="Drugi Slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>CSS</h5>
                <p>Cascading Style Sheets</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide3.png" alt="Treći Slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>Bootstrap</h5>
                <p>Front-end framework</p>
            </div>
        </div>
    </div>
    <!-- Carousel kontrole -->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</div>
</body>
</html>


Aktiviranje Carousel-a pomoću JavaScript

Također možete aktivirati Carousel ručno koristeći JavaScript – samo pozovite metodu carousel() sa ID-om ili selektorom klase elementa omotača u vašem JavaScript kodu.

<script>
$(document).ready(function(){
        $("#myCarousel").carousel();
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aktiviranje Carousel-a pomoću JavaScript u Bootstrap-u 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel-item{
    text-align: center;
    min-height: 280px; /* Spriječite da se Carousle izobliči ako se iz nekog razloga slika ne učita */
}
.carousel-indicators li, .carousel a{
    cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
    // Aktiviranje carousel
    $("#myCarousel").carousel();

    // Omogućavanje carousel kontrola
    $(".carousel-control-prev").click(function(){
        $("#myCarousel").carousel('prev');
    });
    $(".carousel-control-next").click(function(){
        $("#myCarousel").carousel('next');
    });

    // Omogućavanje carousel indikatora
    $(".slide-one").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".slide-two").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".slide-three").click(function(){
        $("#myCarousel").carousel(2);
    });
});
</script>
</head>
<body>
<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li class="slide-one active"></li>
            <li class="slide-two"></li>
            <li class="slide-three"></li>
        </ol>
        <!-- Omot za Carousel artikle -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/slide1.png" alt="Prvi Slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>HTML</h5>
                    <p>HyperText Markup Language</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/slide2.png" alt="Drugi Slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>CSS</h5>
                    <p>Cascading Style Sheets</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/slide3.png" alt="Treći Slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Bootstrap</h5>
                    <p>Front-end framework</p>
                </div>
            </div>
        </div>
        <!-- Carousel kontrole -->
        <a class="carousel-control-prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
</body>
</html>