My attempt to create a bootstrap carousel using cards on my website has hit a snag. I found some code here.
The code snippet I used is as follows:
<section class="carousel slide" data-ride="carousel">
<div class="container">
<div class="row">
<div class="col-xs-12 text-md-right lead">
<a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
{% capture category_name %}{{ page.category }}{% endcapture %}
{% for post in site.categories[category_name] limit:4 %}
{% if post.url != page.url %}
<div class="col-md-4">
<div class="card mb-2">
<div class="card-img-top card-img-top-250">
{% assign image = post.content | split:"!-- ![header](" %}
{% assign html = image[1] | split:") -->" | first %}
{% if html and html != "" %}
<img class="img-fluid" src="{{ html }}" alt="Carousel 1">
{% endif %}
</div>
<div class="card-block p-t-2">
<h4 class="card-title text-center " itemprop="name headline">{{ post.title }}</h4>
<div class="text-center">
<a href="{{ post.url | prepend: site.baseurl }}" class="btn btn-info my-2 text-center shadow-sm text-white" role="button">View Now</a>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="row row-equal carousel-item m-t-0">
{% for post in site.categories[category_name] offset:3 limit:3 %}
<div class="col-md-4">
<div class="card mb-2">
<div class="card-img-top card-img-top-250">
{% assign image = post.content | split:"!-- ![header](" %}
{% assign html = image[1] | split:") -->" | first %}
{% if html and html != "" %}
<img class="img-fluid" src="{{ html }}" alt="Carousel 4">
{% endif %}
</div>
<div class="card-block p-t-2">
<h4 class="card-title text-center text-info" itemprop="name headline">{{ post.title }}</h4>
<div class="text-center">
<a href="{{ post.url | prepend: site.baseurl }}" class="text-center btn btn-info shadow-sm my-2 text-white" role="button">View Now</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
In terms of the javascript part, it looks like this:
(function($) {
"use strict";
// manual carousel controls
$('.next').click(function(){ $('.carousel').carousel('next');return false; });
$('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
})(jQuery);
As for the CSS styling, we have the following rules applied:
/* equal card height */
.row-equal > div[class*='col-'] {
display: flex;
flex: 1 0 auto;
}
.row-equal .card {
width: 100%;
}
/* ensure equal card height inside carousel */
.carousel-inner>.row-equal.active,
.carousel-inner>.row-equal.next,
.carousel-inner>.row-equal.prev {
display: flex;
}
/* prevent flicker during transition */
.carousel-inner>.row-equal.active.left,
.carousel-inner>.row-equal.active.right {
opacity: 0.5;
display: flex;
}
/* control image height */
.card-img-top-250 {
max-height: 250px;
overflow:hidden;
}
The issue arises when trying to implement my custom CSS file at .
Upon applying the CSS to my site, several problems arise:
1. Carousel indicators are fixed to the left (unlike the sample page where they are on the right).
2. The carousel's width appears improper in mobile view, slightly offset to the left.
3. Additionally, the carousel displays 3 cards at once in mobile view, whereas the desired behavior is only one card displayed at a time.
Here is my site for reference: Click Here