Skip to content

Instantly share code, notes, and snippets.

@gciampa

gciampa/index.html

Created April 2, 2023 18:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gciampa/fc4ea9c15c2670cfe9e9fb6cf18b56a0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gciampa/fc4ea9c15c2670cfe9e9fb6cf18b56a0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gciampa created this gist Apr 2, 2023.
    82 changes: 82 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module">
    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
    import { enter, leave, toggle } from "https://unpkg.com/[email protected]/index.js"
    window.Stimulus = Application.start()

    Stimulus.register("slideshow", class extends Controller {
    static targets = [ "slide" ]
    static values = { index: Number }

    next() {
    this.indexValue++
    }

    previous() {
    this.indexValue--
    }

    indexValueChanged() {
    this.showCurrentSlide()
    }

    async showCurrentSlide() {
    await this.animateOut()
    enter(this.currentSlide)
    }

    async animateOut() {
    const promise = new Promise((resolve, reject) => {
    this.hiddenSlide.addEventListener("transitionend", () => {
    resolve()
    })
    })
    leave(this.hiddenSlide)
    return promise
    }

    get currentSlide() {
    return this.slideTargets.at(this.indexValue)
    }

    get hiddenSlide() {
    return this.slideTargets.filter((value, index) => this.indexValue != index).pop()
    }
    })
    </script>
    </head>
    <body>
    <div class="flex mx-auto my-16 max-w-md border border-1 rounded overflow-hidden h-32" data-controller="slideshow" data-slideshow-index-value="0">
    <div class="border-solid border-2 border-sky-500 rounded p-4 m-4 w-full text-right"
    data-slideshow-target="slide"
    data-transition-enter="transform transition ease-in-out duration-300"
    data-transition-enter-start="opacity-0"
    data-transition-enter-end="opacity-100"
    data-transition-leave="transform transition ease-in-out duration-300"
    data-transition-leave-start="opactiy-100"
    data-transition-leave-end="opacity-0"
    >
    <button data-action="slideshow#next">Next &rarr;</button>
    <p>Slide 1!</p>
    </div>

    <div class="border-solid border-2 border-sky-500 rounded p-4 m-4 w-full hidden"
    data-slideshow-target="slide"
    data-transition-enter="transform transition ease-in-out duration-500"
    data-transition-enter-start="translate-x-full opacity-0"
    data-transition-enter-end="translate-x-0 opacity-100"
    data-transition-leave="transform transition ease-in-out duration-500"
    data-transition-leave-start="translate-x-0 opacity-100"
    data-transition-leave-end="translate-x-full opacity-0"
    >
    <button data-action="slideshow#previous">&larr; Back</button>
    <p>Slide 2!</p>
    </div>
    </div>
    </body>
    </html>