时间戳

首页 > 解决方案 > 如何在显示页面中实现轮播或几张照片（Ruby on Rails）

ruby-on-rails - 如何在显示页面中实现轮播或几张照片（Ruby on Rails）

问题描述

我有一个显示我所有产品的索引页（首先是标题，然后是一张照片，然后是一些文字）。当点击其中一个产品时，用户会进入我的展示页面，显示更多的文字、一张地图和一张以前的照片。现在我想添加更多照片或旋转木马，但不知道该怎么做。可能首先我必须在模式中添加一些 t.strings - 但我可以为轮播做这件事吗？然后我将在哪里将轮播代码 - 放入显示页面？或者，如果我要在一张照片中再添加 10 张照片，我是否必须在架构中为每张照片添加一个 t.string？我已经尝试通过编辑它不起作用的页面来插入多张照片。或者我能以某种方式在模式中有一种 t.array 吗？这是我的代码：

                    INDEX.html.erb
<div class="main-content">

<div class="row" id="uebersicht"> 

    
<p id="notice"><%= notice %></p>

<!--% cache product do %-->

    <% @products.each do |product| %>

<div class="Spaltendefinition">	
 <div class="col-xs-12 col-md-6 col-lg-4">
     <div class="gehoertzusammen">
         <div class="name">
       <h3> <%= product.name %> </h3>
       </div>#
       
       <div class="foto">
      <%= image_tag(product.image_url, class: 'img-responsive picturebox') %>
      </div>
<!-- generates the HTML tag: -->
<!--a href="/products/3>Show Product</a-->
        
       <div class="descriptionbox"> 
         <p><%= product.description %></p>
       </div>

        <p> Highlights: <%= product.highlights %> </p>
    </div>
        <p> <%= link_to 'Einzelheiten', product, class: 'btn btn-default' %> | <%= link_to 'Bearbeiten', edit_product_path(product), class: 'btn btn-default' %></p>
        <br>
        
       </div>

      
      <br>
 <% end %>
 
 <div class="neuesprodukt">
<%= link_to 'Neues Produkt', new_product_path, class: 'btn btn-default' %>
</div>
  </div> <!-- /col -->
 </div> 
</div>



              SHOW.html.erb
<div class="Einzelreiseseite">
<div class="row">
<p id="notice"><%= notice %></p>

 <div class="col-sm-6 col-md-4">
<p>
  <strong> <%= @product.name %> </strong>
</p>

<p>
  <strong>Kurzbeschreibung:</strong>
  <%= @product.description %>
</p>

<p>
  <strong>Highlights:</strong>
  <%= @product.highlights %>
</p>

<p>
  <strong>Details:</strong>
  <%= @product.details %>
</p>

</div>

 <p> <%= image_tag( @product.map_url, class: "img-responsive map") %> </p>

<p><%= image_tag( @product.image_url, class: "img-responsive img-zoom1", data_zoom_image: "@product.image_url") %> </p>

<!--img src="../assets/afrika2.jpg"> <img src="../assets/afrika1.jpg"-->

<%= link_to 'Bearbeiten', edit_product_path(@product), class: "btn btn-default" %> |
<%= link_to 'Zurück', products_path, class: "btn btn-default" %>
</div>
</div>


 SCHEMA
ActiveRecord::Schema.define(version: 20180309123443) do

  create_table "products", force: :cascade do |t|
    t.string   "name"
    t.string   "image_url"
    t.text     "description"
    t.text     "highlights"
    t.text     "details"
    t.string   "map_url"
    t.datetime "created_at",  null: false
    t.datetime "updated_at",  null: false
  end

end

您需要更多详细信息吗？提前致谢！尤塔

标签： ruby-on-rails

解决方案

有一个很棒的宝石叫做 slick 用于实现带有导轨的旋转木马。这就是你所要做的：

宝石文件

gem 'jquery-slick-rails'

应用程序.js

//= require jquery.slick

看法

<section class="slider-wrapper">
  <div class="container slider">
    <% Product.each do |slide| %>
      <!-- content -->
      </div>
    <% end %>
  </div>  
</section>

<script type="text/javascript">
  $(".container").slick({
    dots: true,
    accessibility: true,
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
  });
</script>

jquery 中有很多可能的配置，这只是一个例子。

推荐阅读