Last active
October 30, 2020 16:28
-
-
Save adamrosloniec/a3995cc3aec2537d7ee4 to your computer and use it in GitHub Desktop.
wordpress acf bootstrap carousel - simple example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// bootstrap carousel build with wordpress acf - simple method | |
// with add class 'active' to first div - MUST BE! | |
// also you must add css: | |
// .item {display:none;} | |
// .item.active {display:block;} | |
// first method | |
<ul id="carousel" class="slider carousel" data-ride="carousel" data-interval="<?php if ( get_field('slider__speed','option') ) { the_field('slider__speed','option'); } else { echo '4000'; } ?>"><!-- add sub_field to change slide time --!> | |
<?php if ( have_rows('slider__item','option') ) : ?> <!-- take slides from Options Page > slider__item --> | |
<?php $count = 0 ?> | |
<?php while ( have_rows('slider__item','option') ) : the_row(); ?> | |
<?php $title = get_sub_field('slider__item--title','option'); ?> <!-- add title --> | |
<?php $image = get_sub_field('slider__item--image','option'); ?> <!-- add image --> | |
<li class="slider__item item<?php if ( !$count ) { echo ' active'; } ?>"> | |
<img class="slider__item--image" src="<?php echo $image['url']; ?>" alt="<?php echo $title; ?>" /> | |
<div class="carousel-caption"> | |
<h2 class="slider__item--title"><?php echo $title; ?></h2> | |
</div> | |
</li> | |
<?php $count++; ?> | |
<?php endwhile; ?> | |
<?php endif; ?> | |
</ul> | |
// other method | |
<?php if( have_rows('slider') ) : ?> | |
<div id="carousel" class="carousel slide page-slider" data-ride="carousel"> | |
<div class="carousel-inner" role="listbox"> | |
<?php $i = 0; ?> | |
<?php while( have_rows('slider') ) : the_row(); ?> | |
<div class="item <?php echo $i==0 ? 'active' : ''; $i++; ?>"> | |
<img src="<?php the_sub_field('image') ?>" alt="" /> | |
<div class="carousel-caption"> | |
<h2><?php the_sub_field('title'); ?></h2> | |
</div> | |
</div> | |
<?php endwhile; ?> | |
</div> | |
</div> | |
<?php endif; ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What and elegant solution, thanks