Как сделать бутстрап из карусели с карточками

Question

Я пытаюсь сделать загрузочную карусель с карточками на моем сайте.У меня есть код от здесь .
Код, который я использовал:

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

и 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;
}

Я думаю, что у меня есть проблема с bootstrap.css.Мой css загружен на https://demo.justinechacko.in/css/main.css

Но когда я применяю это к своему сайту, у меня возникают некоторые проблемы, такие как
1. Индикаторы карусели фиксируются слева (на странице codeply он находится в правильном положении).
2. Ширина карусели неверна в мобильном представлении, она расположена немного левее.
3. Также карусель дает 3 карты одновременно в мобильном представлении (в codeply одновременно отображается только одна карта).
Здесь - мой сайт.

Answer 1

Решение для первых двух точек

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 (№ строки: 947) Заменить ниже класса

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

Для 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 Сова Карусель I gave line below

Сова Карусель Официальная ссылка

Пример ссылки Сова Карусель