How to make bootstrap carousel with cards

Question

I try to make a bootstrap carousel with cards in my website. I have a code from here.
The code I used is

<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>

javascript

(function($) {
    "use strict";

    // manual carousel controls
    $('.next').click(function(){ $('.carousel').carousel('next');return false; });
    $('.prev').click(function(){ $('.carousel').carousel('prev');return false; });

})(jQuery);

and css


/* 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;
}

I think I have some bootstrap.css problem. My css loaded at https://demo.justinechacko.in/css/main.css

But when I apply that to my site, I have some problems like,
1. Carousel indicators are fixed to left (In codeply page it is in right position).
2. Carousel width is not proper in mobile view, it positioned little bit left.
3.Also carousel give 3 cards at a time in mobile view(In codeply it shows only one card at a time).
Here is my site.

Already answered here: https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once — Carol Skelly, Jun 11 '19 at 13:03

Manthan Patel · Accepted Answer · 2019-05-28T18:18:39.310

0

Solution for First two points

1. Carousel indicators are fixed to left (In codeply page it is in right position).

2. Carousel width is not proper in mobile view, it positioned little bit left. Above points

Main.css (Line no.: 947) Replace below class

.row {
display: flex;
flex-wrap: wrap;
/* margin-right: -15px; */
/* margin-left: -15px; */
}

For 3^rd point I will say you implement the wrong thing for your card. You can not put your card in normal carousel For that you have to use Owl CarouselI gave line below

Owl Carousel Official Link

Owl Carousel Example Link

edited May 28 '19 at 18:18

answered May 28 '19 at 05:19

Manthan Patel

1,784
19
23

I tried, owl carousel in my site, but not giving images. https://demo.justinechacko.in/ – May 29 '19 at 07:39
1

Now working, I missed `rel="stylesheet"` for css files.;) – May 29 '19 at 07:56
@Can you check carousel nav indicators. It is not working for all slide. – May 29 '19 at 10:09

How to make bootstrap carousel with cards

1 Answers1