"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "create-a-row-of-cards", "hProperties": { "id": "create-a-row-of-cards" } }, "depth": 2, "value": "Create a row of cards" }, { "data": { "id": "duplicate-the-cards", "hProperties": { "id": "duplicate-the-cards" } }, "depth": 2, "value": "Duplicate the cards" }, { "data": { "id": "animate-the-carousel", "hProperties": { "id": "animate-the-carousel" } }, "depth": 2, "value": "Animate the carousel" }, { "data": { "id": "final-thoughts", "hProperties": { "id": "final-thoughts" } }, "depth": 2, "value": "Final thoughts" }]; const readingTime = { "minutes": 3, "words": 751, "text": "3 min read" }; const frontmatter = undefined; const Styles = () => { const _components = { style: "style", ..._provideComponents() }; return _jsx(_components.style, { dangerouslySetInnerHTML: { __html: ` .card { width: 100%; color: #fff; border-radius: 24px; box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0; padding: 20px; font-size: xx-large; display: flex; justify-content: center; align-items: center; min-height: 200px; } .card:nth-child(1) { background: #7958ff; } .card:nth-child(2) { background: #5d34f2; } .card:nth-child(3) { background: #4300da; } .carousel { margin: 0 auto; padding: 20px 0; max-width: 700px; overflow: hidden; display: flex; } .carousel { margin: 0 auto; padding: 20px 0; max-width: 700px; overflow: hidden; display: flex; } .carousel.animated:hover .group { animation-play-state: paused; } .carousel:not(.basic) > * { flex: 0 0 100%; } .group { display: flex; gap: 20px; padding-right: 20px; will-change: transform; } .group.animated { animation: scrolling 10s linear infinite; } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ` } }); }; const RowOfCards = () => { const _components = { div: "div", ..._provideComponents() }; return _jsxs(_components.div, { className: "carousel basic", children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] }); }; const Cards = ({isAnimated}) => { const _components = { div: "div", ..._provideComponents() }; return _jsxs(_components.div, { className: ['carousel', isAnimated && 'animated'].join(' '), children: [_jsxs(_components.div, { className: ['group', isAnimated && 'animated'].join(' '), children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] }), _jsxs(_components.div, { "aria-hidden": true, className: ['group', isAnimated && 'animated'].join(' '), children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] })] }); }; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {Note} = _components; if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(Styles, {}), "\n", _jsxs(_components.h2, { id: "introduction", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) }), "Introduction"] }), "\n", _jsx(_components.p, { children: "We love JavaScript, of course. But it's always fun to see what we can achieve with CSS alone - especially when it comes to animations, since CSS animations are often \"less heavy\" than JavaScript animations." }), "\n", _jsx(_components.p, { children: "In this post, I'll show you how to create an infinite scrolling carousel animation with pause on hover effect using only CSS. Here's a preview of what we'll be building:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["This tutorial uses ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& nesting\nselector" }), " syntax, which is a\nBaseline 2023 feature. Please adjust the code accordingly if you're targeting older browsers."] }) }), "\n", _jsxs(_components.h2, { id: "create-a-row-of-cards", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#create-a-row-of-cards", children: _jsx(_components.span, { children: "#" }) }), "Create a row of cards"] }), "\n", _jsx(_components.p, { children: "First, let's create the basic structure of our carousel. Consider a row of cards:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Looks good, right? The cards can be your fancy banners, product images, or anything you want to showcase in your carousel." }), "\n", _jsxs(_components.h2, { id: "duplicate-the-cards", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#duplicate-the-cards", children: _jsx(_components.span, { children: "#" }) }), "Duplicate the cards"] }), "\n", _jsx(_components.p, { children: "Since we want the carousel to be infinite, it should be connected end-to-end. Instinctively, we can try to repeat the cards:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Check out the result:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Only the first set of cards is visible. If you check the HTML, you'll see that the second set of cards is hidden and follows the first set." }), "\n", _jsxs(_components.h2, { id: "animate-the-carousel", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#animate-the-carousel", children: _jsx(_components.span, { children: "#" }) }), "Animate the carousel"] }), "\n", _jsx(_components.p, { children: "Time to animate the carousel! Since we have two sets of cards connected, we can animate the carousel by transforming the card groups. Here's how:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "We still have one last touch to add: pausing the animation when hovering over the carousel. This will give users a chance to see the content more clearly. Since we have two sets of cards, we need to pause both groups when hovering over the carousel:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "That's it! 🎊 Now the carousel will pause when you hover over it." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "final-thoughts", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#final-thoughts", children: _jsx(_components.span, { children: "#" }) }), "Final thoughts"] }), "\n", _jsxs(_components.p, { children: ["CSS is powerful, and it's always fun to explore what we can achieve with it. There are also other CSS properties like ", _jsx(_components.code, { children: "scroll-snap-type" }), " and ", _jsx(_components.code, { children: "scroll-snap-align" }), " that can help you create an interactive carousel. Happy coding! 🚀"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, Styles, RowOfCards, Cards, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }