Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carousel with Indicators weird behavior #812

Open
alanPaivaAsp opened this issue Dec 24, 2023 · 0 comments
Open

Carousel with Indicators weird behavior #812

alanPaivaAsp opened this issue Dec 24, 2023 · 0 comments

Comments

@alanPaivaAsp
Copy link

alanPaivaAsp commented Dec 24, 2023

When clicking multiple times in the carousel using indicators variant (don't know about the others) it behaves wierd (see video example below)

Expected behavior: If I click 4 times in a fast way, it moves forward 4 images

Current behavior: Gets stuck in the current image
weird-behavior.webm

Component code:

defmodule NinaWeb.PageComponents.Index.ShowCaseCard do
  @moduledoc """
  The showcase card component. Used to display a clothing item.
  """
  use Moon.StatefulComponent

  alias NinaWeb.Components.Card
  alias Moon.Icons.ControlsChevronRight
  alias Moon.Icons.ControlsChevronLeft
  alias Moon.Design.Carousel

  @doc "The Title of showcase_card"
  prop(title, :string, required: true)

  @doc "The description of showcase_card"
  prop(description, :string, required: true)

  @doc "The price of showcase_card"
  prop(price, :number, required: true)

  @doc "The image_src of showcase_card"
  prop(images, :list, required: true)

  def render(assigns) do
    ~F"""
    <Card class="" rounded={true}>
      <:header>
        <Carousel class="w-full" {=@id}>
          <Carousel.LeftArrow>
            <ControlsChevronLeft />
          </Carousel.LeftArrow>
          <Carousel.Reel>
            {#for image <- @images}
              <Carousel.Item class="w-full h-[400px] rounded-none rounded-t-2xl">
                <img src={image.url} alt={"showcase-card-image-#{@id}"} class="w-full h-full object-fill rounded-t-2xl">
              </Carousel.Item>
            {/for}
            <Carousel.Indicator />
          </Carousel.Reel>
          <Carousel.RightArrow>
            <ControlsChevronRight />
          </Carousel.RightArrow>
        </Carousel>
      </:header>

      <div>
        <h1>{@title}</h1>
        <p>{@description}</p>
        <span>{@price}</span>
      </div>
    </Card>
    """
  end
end

Am I missing something?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant