carousel- karuzela czyli slider

Czym jest karuzela w Bootstrap?
Karuzela jest inaczej sliderem wbudowanym w ten framework. Można w niej prezentować treści w postaci tekstów i obrazów.

 <div id="myCarousel" class="carousel slide"><!--musi byc taka klasa aby karuzela byla responsywna-->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel” data-slide-to="0" class=""></li>
						<li class="active" data-target="#myCarousel" data-slide-to="1"></li>
						<li class=”” data-target="#myCarousel" data-slide-to="2"></li>
						</ol>

						<div class="carousel-inner">
						 <?php 	$i=1;
						$restauracje = new WP_Query(array(
								'post_type' => 'restauracje',
								'posts_per_page' => 6)); ?>
							<?php while($restauracje->have_posts()): $restauracje->the_post();
							if($i == 1){?>
							<div class="item active">
							<?php the_post_thumbnail('medium');?>
						<div class="carousel-caption">
						<h2 class="text-primary"><?php the_title();?></h2>
						<?php the_excerpt();?>

						</div>
						</div><!--item active-->
						<?php }
						else { ?>
						<div class="item">
						<?php the_post_thumbnail('medium');?>
						<div class="carousel-caption">
						<h2 class="text-primary"><?php the_title();?></h2>
						<?php the_excerpt();?>

						</div>
						</div><!--item-->
						<?php }
						$i++; endwhile;
						wp_reset_postdata();
						?>
						</div><!-- carousel inner-->
						<a class="left carousel-control" href="#myCarousel" data-slide="prev">
						<i class="fa fa-angle-left fa-2x"></i></a>
						<a class="right carousel-control" href="#myCarousel" data-slide="next">
						<i class="fa fa-angle-right fa-2x"></i></a>
					</div>

1.Wstawiamy blok karuzeli i nadajemy jej id. Id może być dowolne ale musi być identyczne w odpowiednich miejscach.Klasa karuzeli slide będzie odpowiadać za jej responsywność.
2-6. Generowanie trzech kropek slidera będącymi jednocześnie hiperłączami do poszczególnych slidów. Ze względu na kolorystykę kropki w naszym przykładzie są słabo widoczne.Active jest klasą oznaczjącą aktywny element.
8.W tym divie będzie się znajdowąć główna treść karuzeli ;tekst i miniaturki obrazków.
9.Ustawienie licznika slidów na 1.
10.Stworzenie nowej ( custmowej ) pętli restauracje. Pętla określa typ posta jako restauracje i liczby postów na sześć.
15-21. W dive item-active printowana jest miniaturka, skrócona treść posta( excerpt) , tytuł posta.
38-41. Ustawinie kontrolek nawigacyjnych (lewo, prawo)

Share This

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *