Good morning,
I'm currently developing on the understrap-child theme and I have an issue with a Bootstrap Carousel which I made into a repeater using Acf pro plug-in on Wordpress.
The issue is about the indicator arrows not working. The slider is perfectly working as a repeater, but the right arrow (carousel-control-next) does not work, only the left one allows me to interact with the slider.
I'm wondering if the issue is related to the repeater itself or with me making some stupid mistake I'm not able to see! PLEASE HELP ME
Here's my code:
<div class="container-fluid containerslider sliderdesktop container-home-sub ">
<div id="HomeCarouselIndicators" class="carousel slide" data-ride="carousel">
<!--indicators-->
<?php if( have_rows('slider') ): $i = 0; ?>
<ol class="carousel-indicators">
<?php while ( have_rows('slider') ): the_row(); ?>
<li data-target="#HomeCarouselIndicators" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>
<?php $i++; endwhile; ?>
</ol>
<?php endif; ?>
<!--end of indicators-->
<div class="carousel-inner" role="listbox">
<?php // check if the repeater field has rows of data
$count = 0;
if( have_rows('slider') ){
//loop through
while ( have_rows('slider') ){
//define the row
the_row();
?>
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item subheader-carousel <?php if ($count==0) {echo "active";} ?>" style="background-image: url('<?php the_sub_field('slider_background'); ?>')" >
<div class="">
</div>
</div>
<a class="carousel-control-prev" href="#HomeCarouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#HomeCarouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php
$count=$count+1;
}
}
?>
</div><!--end of carousel inner-->
</div><!--end of homecarouselindicators-->
</div><!--end container slider-->
At a glance, you have your controls inside your carousel-inner.
https://getbootstrap.com/docs/4.0/components/carousel/
Shows the controls being outside the carousel-inner but inside the carousel.
Related
I have a working image bootstrap 4 carousel on my static website.
But when I want it dynamically for my WordPress theme, the images are not showing. But, in the source code, the images are showing perfectly fine.
Here is the code snippet from the image carousel:
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $args = array('cat' => 2,'post_per_page' => 4);
$slider = new WP_Query($args);
if( $slider -> have_posts() ) :
/* start the loop */
while ($slider -> have_posts() ) : $slider -> the_post();
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'full',true); ?>
<div class="carousel-item <?php if($i === 0): ?>active<?php endif; ?>">
<?php if ($thumb_url !== false) : ?>
<img class="d-block img-fluid" src="<?= $thumb_url[0] ?>" width="<?= $thumb_url[1] ?>" height="<?= $thumb_url[2] ?>" />
<?php endif; ?>
</div>
<?php endwhile; /* end of the loop */
wp_reset_postdata();
endif;
?>
</div>
<!-- Prev,Next Btn -->
<a href="#slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
First post - be gentle :)
I've run into an issue with row height in Bootstrap (I think). I'm brand new to Bootstrap and I'm trying to do some basic edits to my Wordpress site and really want to further my knowledge. Previously I had 4 items equally distributed across the page and it looked great. Well, I've added a fifth item and it's been dropped to the next row below the first four but isn't low enough on the page and blocks the content of one of the original four items.
How can I adjust the height of the offending row(s) to drop the bottom item low enough to accommodate the upper row?
Link to the actual page: HERE
Please see image and code below.
Offending item
HTML from the entire page:
<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
<div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-captions"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slides = get_field('slides','4');
if(is_array($slides) and count($slides)>0){
$num=0;
foreach($slides as $slides_val) {?>
<div class="item <?php if($num==0) echo "active"; ?>">
<img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
<div class="carousel-caption">
<div class="banner-heading">
<span><?php echo $slides_val['slide_content_heading']; ?></span>
</div>
<?php echo $slides_val['slide_content']; ?>
<!-- Contact Us-->
</div>
</div>
<?php $num++; } }?>
</div>
<!-- Controls -->
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- banner ends -->
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Process</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'process',
'orderby'=> 'post_date',
'order' => 'DESC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-4 col-md-4 col-lg-4">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-inner">
<div class="filler-title"><?php the_title(); ?></div>
<?php the_content(); ?>
<!-- Read More-->
</div>
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<?php include('vip.php');?>
<div class="service-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Services</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'services',
'order' => 'ASC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-3 col-md-3 col-lg-3">
<div class="process-fillers-image-section">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-category"><?php the_title(); ?> </div>
</div>
<p><?php the_excerpt(); ?> </p>
Read More
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<div class="instagram-section">
<div class="container">
<div class="row">
<div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
#H2Htpe</div>
<?php echo do_shortcode('[instagram]'); ?>
</div>
</div>
</div>
</div>
<!-- content ends -->
<?php get_footer('footer'); ?>
I was trying to display more than 5 items at once on a single slide, which by default suppose to be just one. I tried creating two loops, one to place content inside the active class and another to place content inside the item class, with post_per_page = 3, what I am getting a first output post three posts on the home, but after first slide it changes to one, what's the possible solution towards this.
Thanks in advance.
I hope you understand, that was my best way to explain this.
Here is what I want to achieve.
Here is my code
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$my_query = new WP_Query('posts_per_page=3');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<!-- The 1st Loop... -->
<div class="active item well-blue">
<div class="offset1">
<h3><?php the_title(); ?></h3>
<p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
Read more...
</div>
</div>
<?php endwhile; wp_reset_query(); ?> <?php
// The 2nd Loop limits the query to 2 more posts...
$limit_query = new WP_Query('posts_per_page=3');
while ($limit_query->have_posts()) :$limit_query->the_post();$do_not_duplicate = $post->ID;?>
<!-- The 2nd Loop same data as 1st loop -->
<div class="item well-blue">
<div class="offset1">
<h3><?php the_title(); ?></h3>
<p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
Read more...
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
Check this link : https://teamtreehouse.com/community/bootstrap-carousel-and-wordpress-loop-without-postspages
you just need to find this line
// Item size (set here the number of posts for each group)
$i = 4;
And change 4 to 5.
WordPress custom slider not running after loading the browser. I think the active class not working for every item but I can not fix it up. Please review the codes and help me---
Here is the JavaScript coding
jQuery(function($) {'use strict',
//#main-slider
$(window).load(function(){
$('#main-slider.carousel').carousel({
interval: 1000
});
});
});
Please review the custom post loop of the post. Here is the full site templates--
https://www.dropbox.com/s/fmqbjb9hahliwf6/mysite.zip?dl=0
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<?php
global $post;
$c = 0;
$args = array( 'post_type' => 'slide',
'posts_per_page' => 5 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
$class = ''; $c++;
$slide_bg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'slide-bg');?>
<?php if ( $c == 1 ) $class = ' active';
else $active = ''; ?>
<div class="item <?php echo $class; ?>" style="background-image: url(<?php echo $slide_bg[0];?>)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1"><?php the_title(); ?></h1>
<h2 class="animation animated-item-2"><?php the_content();?></h2>
<a class="btn-slide animation animated-item-3" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<?php endforeach; wp_reset_postdata(); ?>
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section><!--/#main-slider-->
Are you sure that you properly select the slider?
Because
$('#main-slider.carousel') means "give me slider with id=main-slider and class=carousel, but in your case as far as I can see from provided code must be
$('#main-slider .carousel').carousel({});
I'm using a custom post type on my WP website and also using bootstrap.
I want to list 5 custom post type entries on my home page, and I want the first 3 to have class col-md-4 in one row and in the next row 2 cpt entries to have the class col-md-6
At the moment I have a class col-md-4 and 2 items in the 2nd row are not centered nicely.
This is my current code:
<div class="container-fluid gray-section">
<div class="container">
<div class="row">
<?php
$projects = get_posts(array('post_type'=>'project','posts_per_page'=>5, 'order'=>'ASC'));
if ($projects) { ?>
<ul class="list-unstyled">
<?php foreach ($projects as $post) { setup_postdata( $post ) ?>
<li class="col-md-4 col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php } wp_reset_postdata(); ?>
</ul>
<?php }
?>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end container fluid -->
Any suggestions how to fix this?
This sort of issue is usually solved by adding a count to foreach loop and adding 1 each time. Then within the loop you can check what the count is and apply specific classes. e.g.
<div class="container-fluid gray-section">
<div class="container">
<div class="row">
<?php
$projects = get_posts(
array(
'post_type'=>'project',
'posts_per_page'=>5,
'order'=>'ASC'
)
);
if ($projects) { $count = 1; ?>
<ul class="list-unstyled">
<?php foreach ($projects as $post) {
setup_postdata( $post );
if( $count >= 4 ) { $extra_class = 'col-md-6'; }
else { $extra_class = 'col-md-4'; }
?>
<li class="<?php echo $extra_class; ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php $count++; } wp_reset_postdata(); ?>
</ul>
<?php }
?>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end container fluid -->
Give that a go...
Regards
Dan
<?php
$i = 0;
foreach ($projects as $post) { setup_postdata( $post )
?>
<li class="<?php echo ($i>2):'col-md-6'?'col-md-4' ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php
$i++;
}
wp_reset_postdata();
?>