Question

我尝试在我的网站上制作带有卡片的引导轮播。我有一个来自here的代码。
我使用的代码是

<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.轮播指示器固定在左侧（在代码拼写页面中，它处于右侧位置）。
2.轮播宽度在移动视图中不合适，它的位置偏左。
3.轮播也可以在移动视图中一次提供3张卡片（在代码中每次仅显示一张卡片）。
Here是我的网站。

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

Owl Carousel Official Link

Owl Carousel Example Link

如何用卡制作自举轮播

1 个答案: