kilka bootstrapowych sliderów na jednej stronie

Question

Witam, chciałbym dodać kilka sliderów bootstrapa na jednej stronie jednak nie wiem które elementy zmienić aby każdy działał osobno i poprawnie. Kod:

<div id="carousel-example-generic2" class="carousel slide">
                                <!-- Wskaźniki w postaci kropek -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="3"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="4"></li>
                                </ol>

                                <!-- Slajdy -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="http://placehold.it/1280x500" alt="">
                                        <!-- Opis slajdu -->
                                        <div class="carousel-caption">
                                            <h3>To jest opis</h3>
                                            <p>pierwszego slajdu</p>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <img src="http://placehold.it/1280x500" alt="">
                                        <!-- Opis slajdu -->
                                        <div class="carousel-caption">
                                            <h3>To jest opis</h3>
                                            <p>drugiego slajdu</p>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <img src="http://placehold.it/1280x500" alt="">
                                        <!-- Opis slajdu -->
                                        <div class="carousel-caption">
                                            <h3>To jest opis</h3>
                                            <p>trzeciego slajdu</p>
                                        </div>
                                    </div>

                                </div>

                                <!-- Strzałki do przewijania -->
                                <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
                                    <span class="icon-prev"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
                                    <span class="icon-next"></span>
                                </a>
                            </div>

 

Answer 1

Właściwie to chyba tylko musisz pozmieniać id i hrefy tzn np:

<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
     ...
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators1" 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="#carouselExampleIndicators1" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

I to już jest jako jeden slider, później możesz przekopiować cały kod tylko pozmieniać 1 na 2, później na 3 itd :)  Oczywiście te id powinny jednak coś normalniejszego oznaczać niż jakieś "example" ale mam nadzieję, że udało mi się wyjaśnić na przykładzie.