ResponsiveImageCarouselWithNavigationButtons
The code defines a Ruby class named `CarouselWithButtonsComponent` that inherits from a class named `ApplicationComponent`. This Ruby class is designed to render a carousel component with four images and corresponding navigation buttons for a web application. The `template` method within the class constructs the carousel using HTML divs, each containing an image, and a set of navigation buttons below the carousel for switching between the images. Each carousel item and navigation button is identified by a unique ID. The images are taken from external URLs. The rendered carousel is styled to be fully width-responsive, implying adaptivity to different screen sizes. The navigation buttons are styled as small (`btn-xs`) and laid out in a horizontal line with spacing between them to facilitate user interaction.
# frozen_string_literal: true
class CarouselWithButtonsComponent < ApplicationComponent
def template
div(class: "carousel w-full") do
div(id: "item1", class: "carousel-item w-full") do
img(src: "https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg", class: "w-full")
end
div(id: "item2", class: "carousel-item w-full") do
img(src: "https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg", class: "w-full")
end
div(id: "item3", class: "carousel-item w-full") do
img(src: "https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg", class: "w-full")
end
div(id: "item4", class: "carousel-item w-full") do
img(src: "https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg", class: "w-full")
end
end
div(class: "flex justify-center w-full py-2 gap-2") do
a(href: "#item1", class: "btn btn-xs") { "1" }
a(href: "#item2", class: "btn btn-xs") { "2" }
a(href: "#item3", class: "btn btn-xs") { "3" }
a(href: "#item4", class: "btn btn-xs") { "4" }
end
end
end