こういうのです。
参考元はTailwind carousel component - examples & templates
できるだけ生CSSを書かずにTailwindで実装しました。
前提
ImageモデルのnameカラムをActiveStorageで紐付けています。
なので、image.name.variant(resize_to_fill: [800, 450])はそれぞれよしなの値にしてください。
実装
if文とかはあまりいい感じの実装じゃないので、どうにかしたい思いはある。
とりあえず叩き台ということで。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<style type="text/css">
.carousel-open:checked+.carousel-item {
display: block;
}
.carousel-open:checked+.carousel-item .carousel-image {
position: static;
opacity: 100;
}
</style>
<div class="grid gap-8 row-gap-8 lg:grid-cols-2">
<div class="relative rounded overflow-hidden shadow-md">
<% if @images.empty? %>
<%= image_tag 'https://placehold.jp/70/d6d6d6/7d7d7d/800x450.png?text=No%20Image' %>
<% else %>
<% @images.each_with_index do |image, index| %>
<% size = @images.size %>
<input class="carousel-open" type="radio" id="carousel-<%= index %>" name="carousel" aria-hidden="true" hidden <%= index.zero? ? 'checked' : nil %>>
<div class="carousel-item hidden">
<%= image_tag url_for(image.name.variant(resize_to_fill: [800, 450])), class: "carousel-image absolute" %>
<% if size > 1 %>
<label for="carousel-<%= (index-1) % size %>" class="w-8 h-8 ml-2 md:ml-3 absolute cursor-pointer rounded-full text-white bg-black bg-opacity-30 hover:bg-opacity-80 inset-y-0 left-0 my-auto flex items-center justify-center">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</label>
<label for="carousel-<%= (index+1) % size %>" class="w-8 h-8 mr-2 md:mr-3 absolute cursor-pointer rounded-full text-white bg-black bg-opacity-30 hover:bg-opacity-80 inset-y-0 right-0 my-auto flex items-center justify-center">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</label>
<% end %>
</div>
<% end %>
<% end %>
</div>
</div>
|
