Skip to content

Instantly share code, notes, and snippets.

@jerrylee

jerrylee/gist:cd94bfb2621e4044b67e4eefe3db5ecc

Forked from adamrosloniec/gist:a3995cc3aec2537d7ee4
Created September 14, 2018 17:15
Show Gist options
  • Save jerrylee/cd94bfb2621e4044b67e4eefe3db5ecc to your computer and use it in GitHub Desktop.
Save jerrylee/cd94bfb2621e4044b67e4eefe3db5ecc to your computer and use it in GitHub Desktop.
Download ZIP
wordpress acf bootstrap carousel - simple example
Raw
gistfile1.txt
// 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