Carousel Anatomy

    <.carousel items={[
  Corex.Image.new("/images/beach.jpg", alt: "Beach"),
  Corex.Image.new("/images/fall.jpg", alt: "Fall"),
  Corex.Image.new("/images/sand.jpg", alt: "Sand"),
  Corex.Image.new("/images/star.jpg", alt: "Star"),
  Corex.Image.new("/images/winter.jpg", alt: "Winter")
]
} class="carousel">
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

  

    <.carousel items={[
  %{title: "Lorem ipsum dolor sit amet", description: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{title: "Duis dictum gravida odio ac pharetra?", description: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{title: "Donec condimentum ex mi", description: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
]
} class="carousel">
  <:item :let={post}>
    <article>
      <h3>{post.title}</h3>
      <p>{post.description}</p>
      <.navigate to="#" class="link">Read more</.navigate>
    </article>
  </:item>
  <:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
  <:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>

  

    <.carousel compound :let={ctx} item_count={3} class="carousel">
  <.carousel_root ctx={ctx}>
    <.carousel_item_group ctx={ctx}>
      <%= for {post, index} <- Enum.with_index([
  %{title: "Lorem ipsum dolor sit amet", description: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{title: "Duis dictum gravida odio ac pharetra?", description: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{title: "Donec condimentum ex mi", description: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
]
) do %>
        <.carousel_item ctx={ctx} index={index}>
          <article>
            <h3>{post.title}</h3>
            <p>{post.description}</p>
            <.navigate to="#" class="link">Read more</.navigate>
          </article>
        </.carousel_item>
      <% end %>
    </.carousel_item_group>
    <.carousel_control ctx={ctx}>
      <.carousel_prev_trigger ctx={ctx}><.heroicon name="hero-arrow-left" /></.carousel_prev_trigger>
      <.carousel_indicator_group ctx={ctx}>
        <%= for index <- 0..2 do %>
          <.carousel_indicator ctx={ctx} index={index} />
        <% end %>
      </.carousel_indicator_group>
      <.carousel_next_trigger ctx={ctx}><.heroicon name="hero-arrow-right" /></.carousel_next_trigger>
    </.carousel_control>
  </.carousel_root>
</.carousel>