如何将 Cloudinary 照片集成到带有控件的 Bootstrap 轮播？

Posted 2023-02-15

【中文标题】如何将 Cloudinary 照片集成到带有控件的 Bootstrap 轮播？

【英文标题】：How can I integrate Cloudinary photos to a Bootstrap carousel with controls?

【发布时间】：2021-09-27 23:38:12

【问题描述】：

我想知道是否有人曾经在引导轮播中使用过 Cloudinary 照片。我目前正在开发一个具有项目模型的 Rails 项目。该项目模型有_many 个投资组合模型实例，每个投资组合都有_many Cloudinary 照片附加到它上面。在尝试轮播之前，我通过显示所有这些内容来检查我的路由器和控制器是否正常工作。这是我的项目控制器的样子：

class ProjectsController < ApplicationController
    skip_before_action :authenticate_user!, only: [ :show ]
    
    def show
        @project = Project.find(params[:id])
        @portfolios = @project.portfolios
    end



end

我正在项目的显示页面上显示轮播，我的视图如下所示：

      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <% @portfolios.each do |portfolio| %>
            <% portfolio.photos.each do |photo|%>
              <% if photo == portfolio[0] %>
                <div class="carousel-item active">
                  <%= cl_image_tag photo.key, height: 300, width: 400, crop: :fill %>
                </div>
              <%else%>
                <div class="carousel-item">
                  <%= cl_image_tag photo.key, height: 300, width: 400, crop: :fill %>
                </div>
              <%end%>
            <%end%>
          <%end%>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

目前轮播没有显示照片，但它就在那里。在进一步查看 chrome 控制台后，我可以看到第一个轮播项目中缺少 class="active" 。

如果问题需要进一步澄清或信息，请告诉我。谢谢你们可以为我提供的任何帮助或指导。 ??????????

【参考方案1】：

这里的错误是视图中的 应该是：

if photo == @portfolios.first.photos.first

这会将 class="active" 添加到第一个投资组合的第一张照片中。原始行会将活动类添加到所有项目组合的第一张照片中。