I'm trying to make a carousel with Bootstrap 4 posts - but something is wrong.
I only get 5 posts and I do not want to - I realize it's for 'posts_per_page' => 5 - but can anyone suggest me how to make 5 posts on one slide and 5 other posts on the other slide?
My code:
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$args = array(
'post_type' => 'auta',
'posts_per_page' =>5,
);
$my_query = new WP_Query($args);
$count = 0;
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
<div class="offset1">
<?php the_title(); ?>
</div>
</div>
<?php endwhile; wp_reset_query(); ?> <?php
$limit_query = new WP_Query($args);
while ($limit_query->have_posts()) :$limit_query->the_post();$do_not_duplicate = $post->ID;?>
<div class="carousel-item">
<div class="offset1">
<?php the_title(); ?>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Related
I am trying to build an image slider / carousel using Bootstrap. The images should be shown from the Wordpress post categories 'Aktuell' and 'Referenz' which I have created. The code below works perfectly for me when I want to show 1 image from the category 'Aktuell' and 3 images from the category 'Referenz'.
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Aktuell',
'posts_per_page' => 1,
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('full'); ?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
<?php
$the_query = new WP_Query(array(
'category_name' => 'Referenz',
'posts_per_page' => 3,
'orderby' => 'rand'
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
What I want to do is to show 3 images from each category. So when I use 'posts_per_page' => 3, on line #6, the slide function will not work anymore when I click on the left or right arrows to slide. Instead the images are getting displayed below each other.
how can I get this fixed?
I could find a way to make it work like this:
function the_carousel_item($post, $post_per_page, $offset = 0, $orderby = 'rand', $active = NULL) {
$the_query = new WP_Query(array(
'category_name' => $post,
'posts_per_page' => $post_per_page,
'orderby' => $orderby,
'offset' => $offset
));
$active_css_class = (isset($active)) ? $active : '';
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item <?= $active_css_class ?>">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
}
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
// Display the starter image from the post 'Aktuell'
the_carousel_item('Aktuell', 1, 0, 'ID', 'active');
// Display posts from 'Aktuell'
the_carousel_item('Aktuell', 3, 1, 'ID');
// Display posts from 'Referenz'
the_carousel_item('Referenz', 3);
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
<div class="container inner-cont container-contact-field">
<div class="row mobile contact-field">
<div class="col-xs-8 col-xs-offset-2">
<?php dynamic_sidebar('footer_1'); ?>
<?php dynamic_sidebar('footer_2'); ?>
</div>
</div>
</div>
You want showing 1 image above (Aktuell) and 3 image slider below (Referenz), or 1 above 1 slider, or what?
If 3 image below, your slider will not work because you already set 'posts_per_page' => 3
I am building my Wordpress theme with Bootstrap and am using a carousel on my front page right below the navbar. I found a great way to loop through the images here [1]: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I wanted to run a test on one of the slider areas so I put in the code for the first loop and it displays the title and the excerpt but my image does not show up at all. How can I fix this issue and what is a good way to loop through the rest of the images in the carousel. I added the second loop with the code I found in the link and it messed up my page so I took it out. Here is what I have so far still with some static content that I want to loop through as well. I am going to have 3 images going in the carousel. This is my first real project with Wordpress as I am trying to build my portfolio theme so any help is appreciated!
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Home Carousel',
'posts_per_page' => 1
));
while ($the_query->have_posts() ) :
$the_query->the_post();
$attachment_ids[] = get_the_ID();
endwhile;
wp_reset_postdata();
?>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="active"';}
else{$class_active = 'class=""';}
?>
<li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="item active"';}
else{$class_active = 'class="item"';}
?>
<div <?php echo $class_active;?>>
<div class="display_table">
<div class="display_table_cell">
<?php
$default_attr = array(
'class' => "gallery_images",
'alt' => 'Gallery Images',
);
echo wp_get_attachment_image( $attachment_id_v, 'full', 1, $default_attr );
$image_data = get_post( $attachment_id_v );
if($image_data->post_excerpt != ''){
?>
<div class="carousel-caption my_caption">
<p><?php echo $image_data->post_excerpt;?></p>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
Here is the Working Code !!!
First through the while loop get all the post IDS in an array
<?php
$the_query = new WP_Query(array(
'category_name' => 'Home Carousel',
'posts_per_page' => 1
));
while ($the_query->have_posts() ) :
$the_query->the_post();
$attachment_ids[] = get_the_ID();
endwhile;
wp_reset_postdata();
?>
Now through the array $attachment_ids get the carousel working
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="active"';}
else{$class_active = 'class=""';}
?>
<li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="item active"';}
else{$class_active = 'class="item"';}
?>
<div <?php echo $class_active;?>>
<div class="display_table">
<div class="display_table_cell">
<?php
$default_attr = array(
'class' => "gallery_images",
'alt' => 'Gallery Images',
);
echo wp_get_attachment_image( $attachment_id_v, 'full', 1, $default_attr );
$image_data = get_post( $attachment_id_v );
if($image_data->post_excerpt != ''){
?>
<div class="carousel-caption my_caption">
<p><?php echo $image_data->post_excerpt;?></p>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
put this javascript code at footer.php, since its bootstrap carousel so need some javascript to set the options
<script type="text/javascript">
$('.carousel').carousel({
interval: 3000
})
</script>
In your code item section you write
<?php the_post_thumbnail('full');?>
but I found that in that tutorial link they used
<?php the_post_thumbnail('large');?>.
Can you check it. Is this the reason for your error ?
I am trying to make a Recent Posts Carousel for Bootstrap. The php seems to be outputting the proper HTML but for some reason the carousel won't cycle.
<div class="col-sm-6 col-md-9">
<div class="section-title">
<h1>Most Recent Post</h1>
</div>
<?php
// Get posts (tweak args as needed)
$i=0;
$incNum = 0;
$args = array(
'post_type' => 'post',
'posts_per_page' => 4,
'orderby' => "date",
'order' => "desc"
);
$posts = get_posts( $args );
?>
<div id="recent-post-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php foreach (array_chunk($posts, 4, true) as $posts) : ?>
<?php echo( '<li data-target="#recent-post-carousel" data-slide-to="'.$incNum.'"'.($incNum == 0 ? 'class="active"':'class').'></li>');
$incNum++;
?>
<?php endforeach; ?>
</ol>
<div class="carousel-inner">
<?php
// Get posts (tweak args as needed)
$i=0;
$incNum = 0;
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => "date",
'order' => "desc"
);
$posts = get_posts( $args );
?>
<?php foreach (array_chunk($posts, 4, true) as $posts) : ?>
<div class="item <?php if ($i==0){echo 'active';}?>">
<div class="row">
<?php foreach( $posts as $post ) : setup_postdata($post); ?>
<div class="col-sm-6 post-fix">
<div class="single-post ">
<div class="pull-left post-image">
<a href="#">
<?php the_post_thumbnail( 'full' ); ?>
<i class="fa fa-angle-right"></i>
</a>
</div>
<div class="pull-right post-details">
<p class="post-date">03 Dec 2014</p>
<p><?php echo $i?></p>
<h5><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?>
</h5></a>
<span>John doe</span>
<p><?php echo substr(get_the_excerpt(), 0,99).' [...]'; ?></p>
</div>
</div>
</div>
<?php $i++ ?>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
Edit: I updated it now it works, but is there a more efficient way the repeating the get posts twice?
It is not required to loop posts twice, try the following method.
Methods used
wp_get_recent_posts
wp_get_attachment_url
get_post_thumbnail_id
Note: The additional details such as excerpt and date is not added to the slider, add it as per your exact requirement. Use WP Query instead of query_posts for future development.
<div class="container">
<div id="recent-post-carousel" class="carousel slide" data-ride="carousel">
<?php
$args = array(
'numberposts' => 10,
'offset' => 0,
'category' => 0,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'suppress_filters' => true
);
$recent_posts = wp_get_recent_posts($args, ARRAY_A);
// Uncomment the following lines to check output
// echo "<pre>";
// print_r($recent_posts);
$postCount = count($recent_posts);
foreach ($recent_posts as $recent):
// Change to get_the_post_thumbnail if you need to get image in certain size
$imageUri = wp_get_attachment_url(get_post_thumbnail_id($recent['ID']));
// Check if first iteration
if ($recent === reset($recent_posts)): ?>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php for ($i = 0; $i <= $postCount - 1; $i++): ?>
<li data-target="#recent-post-carousel"
data-slide-to="<?php echo $i; ?>" <?php if ($i === 0) echo 'class = "active" '; ?>>
</li>
<?php endfor; ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
endif; ?>
<div class="item <?php if ($recent === reset($recent_posts)) echo 'active'; ?>">
<img src="<?php echo $imageUri; ?>" alt="Chania" width="460" height="345">
</div>
<?php
// Check if last iteration
if ($recent === end($recent_posts)):
?>
</div>
<?php
endif;
endforeach; ?>
<!-- Left and right controls -->
<a class="left carousel-control" href="#recent-post-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#recent-post-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I hope this helps.
I am trying to make a slider cycle through the custom posts in Wordpress, displaying 4 at a time.
I would like it to cycle through the posts and just loop back to the first one when it has reached the last post.
My code is:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$args = array(
'posts_per_page' => '4',
'post_type' => 'dogs',
);
$myDogs = new WP_Query( $args ); ?>
<?php while ( $myDogs->have_posts() ) : $myDogs->the_post();?>
<div id="sl-cont" class="col-sm-12 col-md-3 col-lg-3">
<div class="well">
<?php the_post_thumbnail('slider-size'); ?>
<div class="dog-caption">
<p><span class="title"><?php the_title(); ?></span><br/>
<?php the_excerpt(); ?><br/>
Read more >> </p>
</div>
</div><!--end of well-->
</div><!--end of container-->
<?php endwhile;
wp_reset_postdata();?>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<?php
$args = array(
'posts_per_page' => '4',
'post_type' => 'dogs',
'offset' => 1
);
$myDogs = new WP_Query( $args ); ?>
<?php while ( $myDogs->have_posts() ) : $myDogs->the_post();?>
<div id="sl-cont" class="col-sm-12 col-md-3 col-lg-3">
<div class="well">
<?php the_post_thumbnail('slider-size'); ?>
<div class="dog-caption">
<p><span class="title"><?php the_title(); ?></span><br/>
<?php the_excerpt(); ?><br/>
Read more >> </p>
</div>
</div><!--end of well-->
</div><!--end of container-->
<?php endwhile;
wp_reset_postdata();?>
</div>
<!--/row-->
</div>
<!--/item-->
</div> <!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="<?php bloginfo('template_directory'); ?>/img/left-paw.png"> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="<?php bloginfo('template_directory'); ?>/img/right-paw.png"></a>
`
Can anyone help?
I have the following code setup to pull sticky posts from WordPress and put them in a Bootstrap Carousel.
How would I go about adding a responsive thumbnail navigation row horizontally that highlights the active thumbnail and limits them to 6 or so?
http://pastebin.com/hmBDmtg2
Like this:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<?php
$i = 0;
$the_query = new WP_Query(array(
'post__in' => get_option('sticky_posts'),
'ignore_sticky_posts' => 1,
'posts_per_page' => 7
));
while ( $the_query->have_posts() ) : $the_query->the_post();
$i++;
?>
<div class="item <?php if($i == 1) { echo 'active'; }?>">
<?php the_post_thumbnail('large');?>
<div class="carousel-caption">
<h4><?php the_title();?></h4>
<p><?php the_excerpt();?></p>
</div>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->