我正在尝试在我的 Rails 应用程序中的引导模式顶部放置引导轮播，这可能吗答案

【问题标题】：I am trying to place a bootstrap carousel on top of a bootstrap modal in my rails app, is this possible我正在尝试在我的 Rails 应用程序中的引导模式顶部放置引导轮播，这可能吗
【发布时间】：2016-07-29 20:08:53
【问题描述】：

我使用回形针上传图片，我有六张图片。现在，当我单击图像时，模式会打开并显示该图像。这很好

现在我正在尝试向模态框添加轮播，这样当我单击图像时，模态框会打开，我可以滑动浏览我的投资组合中每个项目的所有上传图像。

- content_for :title, "Portfolio Page"
= stylesheet_link_tag "application", media: :all
= stylesheet_link_tag    "articles", media: :all
= stylesheet_link_tag    "portfolio", media: :all
= javascript_include_tag "application"
= javascript_include_tag "portfolio"


 %div.container.buffered-top
-# List news article in a reverse order to show last article first.yes please yes it does thanklyou, okay thankyou
- @portfolios.reverse.each_with_index do |portfolio,index|
    = will_paginate @portfolios,  renderer: BootstrapPagination::Rails
    / Trigger the modal with a button
    / Modal
    .modal.fade{:role => "dialog", id: "#{"myModal" + index.to_s}"}
        .modal-dialog
            / Modal content
            .modal-content
                .modal-header
                    %i.fa.fa-times.fa-2x.close{"aria-hidden" => "true","data-dismiss" => "modal", :type => "button"}
                %br

                %h4.modal-title=portfolio.title


                .modal-body
                    .picture
                        .carousel.slide{"data-ride" => "carousel",id: "#{"carousel-example-generic" + index.to_s}"}
                            %ol.carousel-indicators
                                %li.active{"data-slide-to" => "0", "data-target" => "#carousel-example-generic#{index.to_s}"}
                                %li{"data-slide-to" => "1", "data-target" => "#carousel-example-generic#{index.to_s}"}
                                %li{"data-slide-to" => "2", "data-target" => "#carousel-example-generic#{index.to_s}"}
                            .carousel-inner{:role => "listbox"}
                                .carousel-item.active
                                    =image_tag portfolio.image1.url(:thumb),:class => "style_image img-responsive"
                                .carousel-item
                                    =image_tag portfolio.image2.url(:thumb),:class => "style_image img-responsive"
                                .carousel-item
                                    =image_tag portfolio.image3.url(:thumb),:class => "style_image img-responsive"
                                %a.left.carousel-control{"data-slide" => "prev", :href => "#carousel-example-generic#{index.to_s}", :role => "button"}
                                    %span.icon-prev{"aria-hidden" => "true"}
                                    %span.sr-only Previous
                                %a.right.carousel-control{"data-slide" => "next", :href => "#carousel-example-generic#{index.to_s}", :role => "button"}
                                    %span.icon-next{"aria-hidden" => "true"}
                                    %span.sr-only Next
                    - if !portfolio.link.blank?
                        %a.link{:href => "http://#{portfolio.link}",:target => "_blank"}
                            %i.fa.fa-github.fa-2x
                    %br
                    %br
                    -#Show the fist 350 characters of the article
                    %p.text= portfolio.text

    .col-xs-12.col-sm-6.col-md-6
        .image.col-sm-12
            %a{"data-target" => "#myModal#{index.to_s}", "data-toggle" => "modal", :index => index}
                =image_tag portfolio.image1.url(:medium),:class => "style_image img-responsive", :index => index
            %a{"data-target" => "#myModal#{index.to_s}", "data-toggle" => "modal"}
                .imgDescription
                    .tags
                        =raw portfolio.all_tags
                    .title
                        =portfolio.title
                    %br
                    %i.fa.fa-search.fa-2x{"aria-hidden" => "true"}

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap carousel

【解决方案1】：

是的，这是可能的。

看看这个例子：

<body>
  <div class="container">
    <div class="wrapper">
    <a class="btn btn-primary btn-lg" id="open-modal-button" data-target=".mymodal" data-toggle="modal">Open Me  </a>
    </div>
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade mymodal" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="carousel slide" data-interval="false" data-ride="carousel" id="carousel">
            <div class="carousel-inner">
              <div class="item active">
                <div class="row">
                  <div class="col-md-12">
                    <%= image_tag("image1.png") %>
                    <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-6 col-md-offset-3">
                    <%= image_tag("image2.png") %>
                    <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-6 col-md-offset-3">
                    <%= image_tag("image3.png") %>
                    <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-6 col-md-offset-3">
                    <%= image_tag("image4.png") %>
                    <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button>
                </div>
              </div>
            </div>
            <a class="left carousel-control" data-slide="prev" href="#carousel" role="button"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" data-slide="next" href="#carousel" role="button"><span class="glyphicon glyphicon-chevron-right"></span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

一些CSS：

body {
 margin: 0 auto;
 text-align: center;
}

.wrapper {
    text-align: center;
}

#open-modal-button {
    position: absolute;
    top: 30%;
}

请确保您在轮播之前放置一个条件语句，以验证图像的存在。

注意：只需使用 bootstrap.js 和 bootstrap.css

【讨论】：

对不起，我更新了我的答案。我认为，最有效的方法是使用each do 方法，这样您就不会依赖图像的数量。