I am trying to build a bootstrap (3.3.7) carousel from scratch, similar to this one:
https://littleseabear.com
I have managed to get the code to call posts but currently it shows the slides as a grid. O
Can someone help me figure out why the row does not work as a carousel - the arrows do not work to move the slides acorss. It either shows 4 as a grid or 3 with the 4th missing.
I can't seem to get further than this.
my guess is because the "active" class doesn't change when the prev or next buttons are pressed. If I put "item" class in the else statement, the slides disappear but the "item" class in the if statement breaks it out of the grid (as seen in image 1).
Index.php
<?php if ($the_query->have_posts()) : $postCount = 1; ?>
<div class="container-fluid">
<div id="firstcarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-10 mxauto " role="listbox">
<?php
while ( $the_query->have_posts() ) :
$the_query->the_post();
$postCount++;
$active = $postCount++;
if ($postCount === 2){ ?>
<div class="carousel carousel-item col-md-4 ">
<?php the_post_thumbnail( 'large', ['class' => 'img-fluid mx-auto d-block active', 'title' => 'Feature image']);
?>
<div class="carousel-caption">
<?php the_title();
the_excerpt();?>
</div>
</div>
<?php } else { ?>
<div class="carousel carousel-item col-md-4">
<?php the_post_thumbnail( 'large', ['class' => 'img-fluid mx-auto d-block ', 'title' => 'Feature image']);
?>
<div class="carousel-caption">
<?php the_title();
the_excerpt();?>
</div>
</div>
<?php } endwhile; ?>
<?php wp_reset_postdata(); ?>
</div><!-- .carousel-inner -->
<a class="left carousel-control" href="#firstcarousel" 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="#firstcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only"> Next</span>
</a>
</div>
</div>
<?php endif; ?>
Rendered HTML
<div id="content" class="site-content">
<div class="container">
<div class="inside">
<div class="container-fluid">
<div id="firstcarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-10 mxauto " role="listbox">
<div class="carousel carousel-item col-md-4 ">
<img width="1024" height="683" src="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/CFA4B291-1FA2-4C3E-8EDF-B691C7903838-scaled.jpeg?fit=1024%2C683&ssl=1" class="img-fluid mx-auto d-block active wp-post-image" alt="" loading="lazy" title="Feature image" srcset="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/CFA4B291-1FA2-4C3E-8EDF-B691C7903838-scaled.jpeg?w=2560&ssl=1 2560w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/CFA4B291-1FA2-4C3E-8EDF-B691C7903838-scaled.jpeg?resize=300%2C200&ssl=1 300w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/CFA4B291-1FA2-4C3E-8EDF-B691C7903838-scaled.jpeg?resize=1024%2C683&ssl=1 1024w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/CFA4B291-1FA2-4C3E-8EDF-B691C7903838-scaled.jpeg?w=2320&ssl=1 2320w" sizes="(max-width: 1024px) 100vw, 1024px" /> <div class="carousel-caption">
Welcome to my new blog!<p>Welcome to my blog. This is the space I will use to talk about everything and anything, not just the books I am working on, […] <span class="read-more-link"><a class="read-more" href="https://testthemedesign.littleseabear.com/?p=273">Read More</a></span></p>
</div>
</div>
<div class="carousel carousel-item col-md-4">
<img width="1024" height="683" src="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C963F171-FC14-4173-A539-511060AA9DED-scaled.jpeg?fit=1024%2C683&ssl=1" class="img-fluid mx-auto d-block wp-post-image" alt="" loading="lazy" title="Feature image" srcset="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C963F171-FC14-4173-A539-511060AA9DED-scaled.jpeg?w=2560&ssl=1 2560w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C963F171-FC14-4173-A539-511060AA9DED-scaled.jpeg?resize=300%2C200&ssl=1 300w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C963F171-FC14-4173-A539-511060AA9DED-scaled.jpeg?resize=1024%2C683&ssl=1 1024w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C963F171-FC14-4173-A539-511060AA9DED-scaled.jpeg?resize=768%2C513&ssl=1 768w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C963F171-FC14-4173-A539-511060AA9DED-scaled.jpeg?w=2320&ssl=1 2320w" sizes="(max-width: 1024px) 100vw, 1024px" /> <div class="carousel-caption">
Hello world!<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
</div>
</div>
<div class="carousel carousel-item col-md-4">
<img width="1024" height="683" src="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C54FB831-E6C5-4BEF-B4B5-9AB7A234AF2E-scaled.jpeg?fit=1024%2C683&ssl=1" class="img-fluid mx-auto d-block wp-post-image" alt="" loading="lazy" title="Feature image" srcset="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C54FB831-E6C5-4BEF-B4B5-9AB7A234AF2E-scaled.jpeg?w=2560&ssl=1 2560w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C54FB831-E6C5-4BEF-B4B5-9AB7A234AF2E-scaled.jpeg?resize=300%2C200&ssl=1 300w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C54FB831-E6C5-4BEF-B4B5-9AB7A234AF2E-scaled.jpeg?resize=1024%2C683&ssl=1 1024w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C54FB831-E6C5-4BEF-B4B5-9AB7A234AF2E-scaled.jpeg?resize=768%2C513&ssl=1 768w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2022/05/C54FB831-E6C5-4BEF-B4B5-9AB7A234AF2E-scaled.jpeg?w=2320&ssl=1 2320w" sizes="(max-width: 1024px) 100vw, 1024px" /> <div class="carousel-caption">
3000<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum sem justo, ac efficitur metus ultrices vitae. Curabitur convallis nulla sem, mattis consectetur diam pretium […] <span class="read-more-link"><a class="read-more" href="https://testthemedesign.littleseabear.com/?p=556">Read More</a></span></p>
</div>
</div>
<div class="carousel carousel-item col-md-4">
<img width="1024" height="683" src="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/C72C5057-B5F8-460F-A9A1-5995A65A2B74-scaled.jpeg?fit=1024%2C683&ssl=1" class="img-fluid mx-auto d-block wp-post-image" alt="" loading="lazy" title="Feature image" srcset="https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/C72C5057-B5F8-460F-A9A1-5995A65A2B74-scaled.jpeg?w=2560&ssl=1 2560w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/C72C5057-B5F8-460F-A9A1-5995A65A2B74-scaled.jpeg?resize=300%2C200&ssl=1 300w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/C72C5057-B5F8-460F-A9A1-5995A65A2B74-scaled.jpeg?resize=1024%2C683&ssl=1 1024w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/C72C5057-B5F8-460F-A9A1-5995A65A2B74-scaled.jpeg?resize=768%2C513&ssl=1 768w, https://i0.wp.com/testthemedesign.littleseabear.com/wp-content/uploads/2021/04/C72C5057-B5F8-460F-A9A1-5995A65A2B74-scaled.jpeg?w=2320&ssl=1 2320w" sizes="(max-width: 1024px) 100vw, 1024px" /> <div class="carousel-caption">
Shannon’s blogging guide<p>Here are some tips to help you write your blog. It will include: WordPress editor; Meta-Data Blocks; Images; Header Analysis Jetpack – the green thing […] <span class="read-more-link"><a class="read-more" href="https://testthemedesign.littleseabear.com/?p=452">Read More</a></span></p>
</div>
</div>
<a class="left carousel-control" href="#firstcarousel" 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="#firstcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only"> Next</span>
</a>
</div><!-- .carousel-inner -->
</div>
</div>
CSS
@media (min-width: 768px) {
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
margin-right: initial;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
script.js
/**
* File scripts.js.
*
*/
jQuery( document ).ready( function($) {
$("#firstcarousel").on( 'slide.bs.carousel', function (e) {
/*
CC 2.0 License Iatek LLC 2018
Attribution required
*/
let $e = $(e.relatedTarget);
let idx = $e.index();
console.log("IDX : " + idx);
const itemsPerSlide = 8;
let totalItems = $('.carousel-item').length;
if ( idx >= totalItems - ( itemsPerSlide - 1 ) ) {
let it = itemsPerSlide - ( totalItems - idx );
for (let i=0; i < it; i++) {
// append slides to end
if ( e.direction == "left" ) {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
})
});
My Answer:
carousel items are being displayed as a grid instead of in a row. To fix this issue, you can try the following steps:
1. Make sure you have included the necessary Bootstrap CSS and JS files in your project.
2. Check your HTML structure to ensure that the carousel items are wrapped in a `div` with the class `carousel-inner` and that each item has the class `item`.
3. Add the `carousel-control` class to the previous and next arrow buttons to enable them to control the carousel.
4. Make sure that the `data-target` attribute of the carousel controls matches the `id` of the carousel element.
Here is an example of how your HTML structure should look like:
html
Make sure to replace the `img` tags with your actual content and adjust the classes and attributes as needed. This should help you create a functional Bootstrap carousel slider as a row.
Rate this post
3 of 5 based on 8043 votesComments