Testimonials
ACDB
Code With ACF Integration
HTML
<!-- ACDB -- Testemonials -------------------------------->
<?php if ( have_rows( 'testimonials' ) ) : ?>
<?php while ( have_rows( 'testimonials' ) ) : the_row();?>
<?php
$title = get_sub_field('title');
$sub_field = get_sub_field('sub_field');
?>
<section class="feedback">
<div class="container">
<div class="row">
<div class="col-12 mt-4">
<h4 class="feedback_top_title text-center"><?php echo $title; ?></h4>
</div>
<div class="col-12 mt-4">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner text-center">
<?php
$n = 0;
$act = 'active';
if ( have_rows( 'entrees' ) ) :
while ( have_rows( 'entrees' ) ) : the_row();
echo '<div class="carousel-item text-center '.$act.'">';
echo '<h4 class="feedback_title">"' . get_sub_field('testimonial') . '"</h4>';
echo '<p class="feedback_text">' . get_sub_field('author') . '</p>';
echo '</div>';
$act = '';
$n++;
?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"><img class="wa_bcsv_ch_cont_ic" src="<?php echo get_template_directory_uri(); ?>/images/quote_1.png" /></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"><img class="wa_bcsv_ch_cont_ic" src="<?php echo get_template_directory_uri(); ?>/images/quote_2.png" /></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-12 mt-4">
<h5 class="feedback_bot_title text-center"><?php echo $sub_field; ?></h5>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- ACDB -- END --------------------------------> CSS
/* ACDB -- Testemonials -------------------------------------------*/
.feedback {
background: #F6F6F6;
padding-top: 20px;
padding-bottom: 35px;
}
.feedback_top_title {
font-size: 2rem;
font-weight: 700;
color: #58595B;
}
.feedback_title {
font-size: 1.5rem;
font-weight: 350;
color: #6b9d60;
margin-bottom: 18px;
max-width: 850px;
margin-left: 20%;
margin-right: 20%;
}
.feedback_text {
width: auto;
margin: 0 auto;
max-width: 850px;
margin-left: 20%;
margin-right: 20%;
}
.feedback_bot_title {
margin-top: 54px;
font-weight: 700;
color: #D12881;
font-size: 31px;
}
.carousel-control-next, .carousel-control-prev {
top: 0px !important;
}
@media screen and (min-width: 769px) {
.feedback_title {
margin-left: 12%;
margin-right: 10%;
}
.feedback_text {
margin-left: 12%;
margin-right: 10%;
}
}
/* END ----------------------------------------------------------*/
Needs bootstrap 4
Needs two image files saved in images/ folder
AC8
Code With ACF Integration
HTML
<!-- AC8 -- Testemonials -------------------------------->
<?php if ( have_rows( 'ac8' ) ) : ?>
<?php while ( have_rows( 'ac8' ) ) : the_row();?>
<?php
$title = get_sub_field('title');
$sub_field = get_sub_field('sub_field');
?>
<!-- Section: Testimonials v.2 -->
<section class="text-center my-5 bc8">
<h2 class="h1-responsive font-weight-bold my-5"><?php echo $title; ?></h2>
<div class="wrapper-carousel-fix">
<div id="carousel-example-1" class="carousel no-flex testimonial-carousel slide carousel-fade" data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox">
<!--First slide-->
<?php
$n = 0;
$act = 'active';
if ( have_rows( 'entrees' ) ) :
while ( have_rows( 'entrees' ) ) : the_row();
?>
<div class="carousel-item <?php echo $act; ?>">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<img src="<?php echo get_sub_field('image'); ?>" class="rounded-circle img-fluid"
alt="First sample avatar image">
</div>
<!--Content-->
<p>
<i class="fas fa-quote-left"></i> <?php echo get_sub_field('testimonial'); ?>
</p>
<h4 class="font-weight-bold"><?php echo get_sub_field('author'); ?></h4>
<!--Review-->
<i class="fas fa-star blue-text"> </i>
<i class="fas fa-star blue-text"> </i>
<i class="fas fa-star blue-text"> </i>
<i class="fas fa-star blue-text"> </i>
<i class="fas fa-star blue-text"> </i>
</div>
</div>
<!--First slide-->
<?php $act = ''; $n++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<!--Slides-->
<!--Controls-->
<a class="carousel-control-prev left carousel-control" href="#carousel-example-1" role="button"
data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next right carousel-control" href="#carousel-example-1" role="button"
data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Controls-->
</div>
<!-- Carousel Wrapper -->
</div>
</section>
<!-- Section: Testimonials v.2 -->
<?php endwhile; ?>
<?php endif; ?>
<!-- AC8 -- END -------------------------------->CSS
/* BC8 -- Testemonials -------------------------------------------*/
.bc8{
background-color: #e9f2ff;
border-top: solid 2px #2196f3;
border-bottom: double 7px #eb1c23;
padding-bottom: 20px;
}
/* BC8 END ----------------------------------------------------------*/A0062
Code With ACF Integration
HTML
<!-- a0062 --------------------------------------->
<?php if (have_rows('a0062')) : ?>
<section id="a0062">
<div class="Container">
<div class="row">
<div class="col-12">
<div class="a0062-slideshow-container">
<?php while (have_rows('a0062')) : the_row(); ?>
<div class="a0062-Slides">
<q><?= get_sub_field('text'); ?></q>
<p class="a0062-author">- <?= get_sub_field('autor'); ?></p>
</div>
<?php endwhile; ?>
<a class="a0062-prev" onclick="plusSlides(-1)">❮</a>
<a class="a0062-next" onclick="plusSlides(1)">❯</a>
</div>
<div class="a0062-dot-container">
<?php
$i=1;
while (have_rows('a0062')) : the_row(); ?>
<span class="a0062-dot" onclick="currentSlide(<?=$i ?>)"></span>
<?php
$i++;
endwhile; ?>
</div>
</div>
</div>
</div>
</section>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("a0062-Slides");
var dots = document.getElementsByClassName("a0062-dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" a0062-active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " a0062-active";
}
</script>
<?php endif; ?>
<!-- a0062 End ----------------------------------->CSS
/*-- a0062 --------------------------------------*/
.a0062-slideshow-container {
position: relative;
background: #f1f1f1f1;
}
.a0062-Slides {
display: none;
padding: 40px 80px;
text-align: center;
}
.a0062-prev, .a0062-next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
text-decoration: none;
}
.a0062-next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.a0062-prev:hover, .a0062-next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
}
.a0062-dot-container {
text-align: center;
padding: 10px 20px;
background: #ddd;
}
.a0062-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.a0062-active, .a0062-dot:hover {
background-color: #717171;
}
q {font-style: italic;}
.a0062-author {color: cornflowerblue;}
/*-- a0062 END --------------------------------------*/
