Skip to content

Instantly share code, notes, and snippets.

@Catevika

Catevika/Slider trick clean rotation

Last active October 23, 2025 17:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Catevika/26aa3996f2bb8c463052e91f7fbf20a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Catevika/26aa3996f2bb8c463052e91f7fbf20a1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Catevika renamed this gist Oct 23, 2025. 1 changed file with 0 additions and 0 deletions.
    0 To Have and Have Not, 1944 → Slider trick clean rotation
    View file
    File renamed without changes.
  2. Catevika revised this gist Oct 23, 2025. 1 changed file with 54 additions and 1 deletion.
    55 changes: 54 additions & 1 deletion To Have and Have Not, 1944
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,54 @@
    You know how to whistle, don't you, Steve? You just put your lips together and blow.
    import {useState} from 'react';
    import {allCocktails} from '../constants';

    const Menu = () => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const totalCocktails = allCocktails.length;
    const goToSlide = (index: number) => {
    const newIndex = (index + totalCocktails) % totalCocktails;
    setCurrentIndex(newIndex);
    };

    return (
    <section
    id='menu'
    aria-labelledby='menu-heading'>
    <img
    src='/images/slider-right-leaf.png'
    alt='left-leaf'
    id='m-left-leaf'
    />
    <img
    src='/images/slider-right-leaf.png'
    alt='right-leaf'
    id='m-right-leaf'
    />
    <h2
    id='menu-heading'
    className='sr-only'>
    Cocktail Menu
    </h2>
    <nav
    className='cocktail-tabs'
    aria-label='Cocktail Navigation'>
    {allCocktails.map((cocktail, index) => {
    const isActive = index === currentIndex;
    return (
    <button
    key={cocktail.id}
    className={
    isActive
    ? 'text-white border-white'
    : 'text-white/50 border-white/50'
    }
    onClick={() => goToSlide(index)}>
    {cocktail.name}
    </button>
    );
    })}
    </nav>
    </section>
    );
    };

    export default Menu;
  3. Catevika created this gist Oct 23, 2025.
    1 change: 1 addition & 0 deletions To Have and Have Not, 1944
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    You know how to whistle, don't you, Steve? You just put your lips together and blow.