autor: Robert
<div id="carousel-example-generic" class="carousel slide"> ... </div>gdzie
id="carousel-example-generic"
to dowolna nazwa którą będziemy później stosować.
<ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>Zapis
data-target="#carousel-example-generic"
musi prowadzić do nazwy naszej karuzeli. A ilość wpisów w znaczniku <li>...</li>
musi być równa ilości slajdów. Klasa class="active"
oznacza który slajd ma być pierwszy. Oczywiście tak jak cały następny kod, są one wewnątrz pierwszego diva.
<div class="carousel-inner"> ... </div>A wewnątrz niego każdy obrazek musi znajdować się w divie:
<div class="item active"> <img src="http://placehold.it/1280x500" alt=""> </div> <div class="item"> <img src="http://placehold.it/1280x500" alt=""> </div> <div class="item"> <img src="http://placehold.it/1280x500" alt=""> </div>Gdy chcemy dołączyć opisy slajdów kod wygląda następująco:
<div class="item active">
wskazuje nam na pierwszy slajd który będzie wyświetlany.
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="icon-next"></span> </a>Jak widzimy, tutaj:
href="#carousel-example-generic"
znów trzeba się odwołać do nazwy naszej karuzeli. Odwołania te służą temu by można zamieścić na stronie więcej niż 1 slider i sterować każdym z nich niezależnie.
Witam,
a jak zrobić, żeby sljader dział w slajderze? Tzn. chcę mieć dwa slajdery – jeden główny który będzie dzielił się na kategorie i drugi który będzie mieć obrazki z danej kategorii. Prawie mi się to udało: kropki z głównego slajdera zamieniłam na nazwy kategorii i do pierwszego slajdu(głównego slajdera) wsadziłam slajder (oczywiście pozmieniałam nazwę, itp) umieściłam obrazki (slajdery) z danej kategorii i wszystko działa okej. Problem dopiero pojawia się wtedy kiedy przechodzę do drugiego slajdu (głównego slajdera) i wyświetla się ok, ale jak chce wrócić do wcześniejszego (pierwszego slajdu) to nic się nie wyświetla, a w kodzie dany item jest niewidoczny (w sensie jakby miał klasę hidden). Wiesz może w czym tkwi problem? Czy może po prostu nie da się tak zrobić?? :(
Mam problem z automatycznym startem slidera. W jednym z artykułów radził Pan dodać javascript
$(‚.carousel’).carousel({
interval: 5000})
,gdzie interval to czas w milisekundach.
Niestety po dodaniu skryptu slider nie startuje automatycznie, próbowałem dodać zarówno w sekcji head jak i na końcu przed zamknięciem znacznika body. Nie potrafię rozwiązać tego problemu. Może ma Pan jakieś rady?
Hej! Jak zrobić, żeby karuzela wyświetlała dajmy na to 4 elementy, ale przewijała po jednym. Jednocześnie chcę, żeby była responsywna, czyli np. na tablecie niech wyświetlą się tylko 2. Jeśli dodam do item klasy col-*, to się ustawiają prawidłowo, ale gdy dodam pierwszym czterem .active, to jsvascript przestaje działać. :/ Jak to obejść?
OdpowiedzJeżeli nie działa Wam automatyczny start slidera użyjcie data-ride=”carousel” dla karuzeli np. Pozdrawiam.
OdpowiedzWitam. Chciałabym mieć slider takiej wielkości, jak tutaj: http://kursbootstrap.pl/examples/homepage.html# ale wyśrodkowany. Jak go wyśrodkować?
OdpowiedzNa przykład tak: <div class="col-md-6 col-md-offset-3">Tu wstaw kod karuzeli</div>
i przeczytaj sobie wpis o przestawianiu kolumn: http://kursbootstrap.pl/przestawianie-kolumn/ oraz zobacz przykłady http://kursbootstrap.pl/examples/bootstrap3_offset.html to pomoże ci ustawiać elementy tam gdzie chcesz:)
Witam. Chciałabym, żeby pod moim sliderem był cień taki, jak tu: http://nimbupani.com/drop-shadows-with-css3.html
Próbowałam dopisywać style do <div class="carousel-inner"…. ale tam są :before i :after i nie bardzo umiem sobie z tym poradzić.
Jak to zrobić?
Czy w pliku index.html masz zawarte pliki CSS i JS Bootstrapa oraz jQuery?
http://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Skorzystaj z wersji z serwerami CDN bo może masz coś pokopane ze ścieżkami na serwerze.
.carousel-control.left .carousel-control.right { background: none; } .carousel-control:hover, .carousel-control:focus { opacity: 1; } .carousel-control .icon-next:before .icon-prev:before { color: #ff00ff; } .carousel-indicators .active { background: #ff00ff; }Odpowiedz
Witam mam problem z dostosowaniem slidera do całej szerokości przeglądarki chcę żeby nie było żadnych marginesów ja np kopiuję ze strony bootstrapa cały kod wstawiam zdjęcia i bez względu na rozdzielczość mam te cholerne marginesy podobnie kopiuję kod z kursu bootstrap który kupiłem i to samo chociaż u autora marginesów nie ma…. co to może być ???
OdpowiedzW bootstrapie mamy 2 rodzaje kontenerów .container
, który zamyka stronę i dodaje jej marginesy, oraz .container-fluid
, który nie posiada marginesów i wyświetla się na całej szerokości przeglądarki.
Przykład z karuzelą w zwykłym kontenerze -> http://www.bootply.com/WS2hRJ7W0z
Przykład w container-fluid -> http://www.bootply.com/prsjjlpwbI
OdpowiedzCześć mam slider wrzucony na całą szerokość strony i umieszczam w nim grafikę, działa responsywność przy zmniejszaniu jest ok. Co zrobić by przy wysokich rozdzielczościach obrazek w sliderze rozciągnął się na całą szerokość okna przeglądarki bo w tym momencie zostaje tam „przestrzeń” a obrazek się wyśrodkowuje. Pozdrawiam
OdpowiedzOgólnie rzecz biorąc, jeśli masz obrazek o szerokości mniejszej niż twoja maksymalna rozdzielczość ekranu to pojawią się po bokach paski. Jeśli taki obrazek rozciągniesz to nie będzie on dobrze wyglądał dla wyższych rozdzielczości (pojawi się „pikseloza”) dlatego myślę, że powinieneś wrzucić slajd z obrazkiem o szerokości 1920px.
Odpowiedzhttp://kursbootstrap.pl/klasy-pomocnicze-helper-classes/
tutaj masz opis klas .pull-left
, .pull-right
i .center-block
Dokładnie tak, zauważ, że pewnie masz ustawione wielkości fontów w px. Wtedy niezależnie od rozdzielczości ten font będzie miał taki rozmiar. Obrazek też nie zmniejsza Ci się automatycznie tylko zapewne ma klasę .img-responsive
, która nakazuje mu dopasowywanie się do wielkości ekranu.
Tutaj masz info o tym jak działają media queries -> https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
OdpowiedzWitam. Mam taki banalny problem. Nie udaje mi się dodać zdjęć do sliderów na mojej stronie. Strona zbudowana na bootstrapie. Mam taki zapis pierwotny i za chiny nie chcą mi się podmieniać te szare tła na dodane zdjęcie . Robię zapis img src=”img/img1″ i nie działa. Co robię żle ?
OdpowiedzJeśli chodzi o stronę, którą podałeś przy dodawaniu komentarza to widocznie nie wysłałeś zmian na serwer gdyż gdy włączysz sobie podgląd źródła strony (ctrl+u w chrome) to w linii 72 odpowiedzialnej za pierwszy slajd masz zapis
czyli obrazek nie ma podanej żadnej ścieżki z której miałby pobierać obrazek.
Czołem. Tak, na serwerze nie robiłem jeszcze zmian. Klikam wszystko na razie na pulpicie, bo strona potrzebuje jeszcze liftingu i łatwiej mi jest to robić u mnie na kompie i podglądać zmiany. Pracuję na notepad++ i lokalnie się bawię – jak mam większą pulę to wtedy podmieniam index.html na serwerze.
OdpowiedzZamień sobie kod <span class="glyphicon glyphicon-chevron-left"></span>
na wybrany przez ciebie Font Awesome.
A tutaj -> http://www.sitepoint.com/bootstrap-carousel-with-css3-animations/ masz fajny artykuł o animowaniu karuzeli za pomocą animate.css
Witam!
Mam problem ze sliderem, mianowicie przy przewijaniu używając strzałek slider podnosi mi się do góry (góra chowa się pod paskiem nawigacyjnym). http://nzubus89.ayz.pl/
Kolejne moje pytanie czy mogę wskaźniki w postaci kropek umieścić do góry? i zmienić , żeby miały inny kształt?
Z góry dziękuję za pomoc!
OdpowiedzWe wpisie o górnym navbarze (https://kursbootstrap.pl/opcje-wyswietlania-menu/) jest pewien zapis -> „Aby górne menu było zawsze widoczne na górze strony pomimo jej przewijania, do diva z klasą .navbar należy dołożyć klasę .navbar-fixed-top. Należy pamiętać by do sekcji body naszej strony dodać w stylach CSS padding o wartości minimum 70px gdyż inaczej treść naszej strony będzie się chowała pod paskiem menu.” :)
Aby przenieść kropki na górę w swoim pliku CSS dodaj: .carousel-indicators { top:20px }
Mam problem z karuzelą. jak następuje przesunięcie się obrazka to czcionka a menu mi się zmienia (tylko w czasie ruchu zdjęcia). poza tym używam scrollSpy i jak próbuje nacisnąc na strzałki sterujące to po prostu cała strona scrolluje się do początku div’a z kacuzelą. jest to trochę problematyczne bo psuje mi cały efekt.
OdpowiedzPrzyciski przewijania karuzeli są podpięte do elementu <a>
i twój plugin przewijania bierze je za linki, do których ma przewijać. Spróbuj zamienić a
na span lub button lub przeczytaj dokumentację tego płynnego przewijania bo pewnie umożliwia wyłączenie jakiś elementów.
z przewijaniem sobie poradziłem, wystarczyło zmienić ‚ a[href*=”#”] na ‚.navbar-nav a[href*=”#”] i problem się rozwiązał. Jednak nadal jest problem z czcionką menu. I to głównie w Chrome. jak następuje ruch slidera to literki robią się na chwilę cieńsze. głupio to wygląda bo literki w menu pulsują wraz z ruchem slidera. takie sam literki mam jak menu (przypięte do górnej krawędzi strony) jest bezpośrednio nad divem ze sliderem.
OdpowiedzWitam
Mi karuzela działa poprawnie ale mam problem tego typu że, po najechaniu myszką na karuzelę przewijanie się zatrzymuje do momentu aż myszka z powrotem zjedzie z karuzeli. Dodam tylko że karuzela jest jako tło na całą stronę.
Dodatkowo mam pytanie. Jak zrobić żeby w karuzeli zamiast przewijania było przenikanie zdjęć.
Pozdrawiam
OdpowiedzWitam. Skopiowałem kod, edytowałem img src… a mimo to slider nie działa. Nie ma możliwości nawet zmiany slajdu. Tak jakby w ogóle nie działał.
OdpowiedzJak to widzisz z reklamami Adsense ?
Chodzi o dopasowanie pod media.
Mam na stronie karuzelę w sekcji O PROJEKCIE oraz OFERTA, ale jest problem z wyśrodkowaniem tekstu w pionie. Treści są zakotwiczone do lewego górnego rogu kontenera. Źle to wygląda. W projekcie graficznym mam je wyśrodkowane w pionie względem strzałek. Czy jest możliwe wyśrodkowanie w pionie treści (o różnej wysokości!!!) w karuzeli???
OdpowiedzCzy załączyłaś pliki Bootstrapa -> https://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Odpowiedz