• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

kilka bootstrapowych sliderów na jednej stronie

0 głosów
73 wizyt
pytanie zadane 31 stycznia 2018 w HTML i CSS przez mi-20 Stary wyjadacz (10,220 p.)

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>

 

1 odpowiedź

0 głosów
odpowiedź 31 stycznia 2018 przez Noemi Nałogowiec (41,300 p.)

Właściwie to chyba tylko musisz pozmieniać id 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.

Podobne pytania

0 głosów
1 odpowiedź 107 wizyt
pytanie zadane 7 listopada 2017 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 14 października 2017 w HTML i CSS przez Michał Bartnik Początkujący (440 p.)
0 głosów
0 odpowiedzi 81 wizyt
pytanie zadane 27 maja 2017 w HTML i CSS przez daniel_ Początkujący (440 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

63,241 zapytań

109,485 odpowiedzi

228,714 komentarzy

43,296 pasjonatów

Przeglądających: 336
Pasjonatów: 14 Gości: 322

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...