CodePen Embed - Scroll Snap Carousel Web Component (No Shadow DOM)

Live

This Pen is owned by James Ives on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"jORwKQZ\",\"auto_save\":true},\"hashid\":\"jORwKQZ\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"customelement\",\"css\",\"html\",\"webcomponent\"],\"id\":74017995,\"user_id\":597820,\"html\":\"<scroll-snap-carousel alignment=\\\"center\\\">\\n  <iframe src=\\\"https://www.youtube.com/embed/-L_Jb70YPe4?si=EDWBYK8_hfrsQ78i\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen></iframe>\\n  <iframe src=\\\"https://www.youtube.com/embed/65EfTFUFDwI?si=aJErtJXMW-Q9svck\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen></iframe>\\n  <iframe  src=\\\"https://www.youtube.com/embed/AKscVerlAvY?si=vhfwTzXharkrYgFr\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen></iframe>\\n<iframe  src=\\\"https://www.youtube.com/embed/vrWwrtEHoVs?si=5W71jHooPdKedglK\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen></iframe>\\n  <iframe src=\\\"https://www.youtube.com/embed/ZsL-7mxaQWU?si=wN5mdaulE9SOAzK7\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen></iframe>\\n</scroll-snap-carousel>\",\"css\":\":root {\\n  align-items: center;\\n  background: linear-gradient(45deg, #4094bf, #ff7c7c);\\n  display: flex;\\n  height: 100%;\\n  justify-content: center;\\n}\\n\\niframe {\\n  aspect-ratio: 16/9;\\n  border-radius: 10px;\\n  width: 75%;\\n}\",\"js\":\"/**\\n * A custom element that creates a scrollable carousel with snap points.\\n * Based on an example from this article: https://web.dev/articles/css-scroll-snap\\n * This custom element does NOT utilize the Shadow DOM.\\n *\\n * @attr {'start' | 'center' | 'end' | 'none'} alignment - The alignment of the carousel scroll snap.\\n */\\nclass ScrollSnapCarousel extends HTMLElement {\\n  /**\\n   * Define the properties of the custom element.\\n   */\\n  static get observedAttributes() {\\n    return ['alignment']\\n  }\\n\\n  /**\\n   * Bind the necessary methods to the custom element instance.\\n   */\\n  constructor() {\\n    super()\\n    this.alignment = 'start'\\n    this.scrollToNextPage = this.scrollToNextPage.bind(this)\\n    this.scrollToPreviousPage = this.scrollToPreviousPage.bind(this)\\n    this.calculateGalleryItemSize = this.calculateGalleryItemSize.bind(this)\\n    this.ingestChildren = this.ingestChildren.bind(this)\\n  }\\n\\n  /**\\n   * Called when an attribute on the custom element is changed.\\n   */\\n  attributeChangedCallback(name, oldValue, newValue) {\\n    if (name === 'alignment') {\\n      this.alignment = newValue\\n    }\\n  }\\n\\n  /**\\n   * Called when the element is added to the DOM.\\n   */\\n  connectedCallback() {\\n    this.ingestChildren()\\n    this.render()\\n\\n    this.gallery = this.querySelector('#paginated-gallery')\\n    this.galleryScroller = this.gallery.querySelector('.gallery-scroller')\\n    this.galleryScroller.appendChild(this.fragment)\\n\\n    this.gallery\\n      .querySelector('button.next')\\n      .addEventListener('click', this.scrollToNextPage)\\n\\n    this.gallery\\n      .querySelector('button.previous')\\n      .addEventListener('click', this.scrollToPreviousPage)\\n\\n    this.calculateGalleryItemSize()\\n    window.addEventListener('resize', this.calculateGalleryItemSize)\\n  }\\n\\n  /**\\n   * Called when the element is removed from the DOM.\\n   */\\n  disconnectedCallback() {\\n    window.removeEventListener('resize', this.calculateGalleryItemSize)\\n  }\\n\\n  /**\\n   * Ingests the children of the custom element into a document fragment.\\n   */\\n  ingestChildren() {\\n    this.fragment = document.createDocumentFragment()\\n\\n    Array.from(this.children).forEach((child) => {\\n      this.fragment.appendChild(child)\\n    })\\n  }\\n\\n  /**\\n   * Calculates the size of each gallery item based on the first child element.\\n   */\\n  calculateGalleryItemSize() {\\n    const nodes = Array.from(this.galleryScroller.children)\\n    const firstElement = nodes.find(\\n      (node) => node.nodeType === Node.ELEMENT_NODE,\\n    )\\n    this.galleryItemSize = firstElement.clientWidth\\n  }\\n\\n  /**\\n   * Scroll the carousel to the previous page.\\n   */\\n  scrollToPreviousPage() {\\n    this.galleryScroller.scrollBy(-this.galleryItemSize, 0)\\n  }\\n\\n  /**\\n   * Scroll the carousel to the next page.\\n   */\\n  scrollToNextPage() {\\n    this.galleryScroller.scrollBy(this.galleryItemSize, 0)\\n  }\\n\\n  /**\\n   * Handles the rendering of the component markup and CSS.\\n   */\\n  render() {\\n    this.innerHTML = `\\n        <style>\\n          * {\\n            scroll-behavior: smooth;\\n          }\\n          \\n          .gallery-scroller * {\\n            margin: 0 16px;\\n            min-width: 75%;\\n            position: relative;\\n            scroll-snap-align: ${this.alignment};\\n          }\\n          \\n          .gallery {\\n            position: relative;\\n          }\\n        \\n          .gallery-scroller {\\n            -webkit-overflow-scrolling: touch;\\n            align-items: center;\\n            display: flex;\\n            overflow-x: scroll;\\n            overflow-y: hidden;\\n            scroll-snap-type: x mandatory;\\n          }\\n        \\n          button {\\n            background-color: rgba(0,0,0,0.5);\\n            background-position: 50% 50%;\\n            background-repeat: no-repeat;\\n            border-radius: 4px;\\n            height: 30px;\\n            position: absolute;\\n            top: 50%;\\n            transform: translateY(-50%);\\n            width: 30px;\\n            z-index: 1;\\n          }\\n          \\n          button:hover {\\n            cursor: pointer;\\n          }\\n        \\n          button.next {\\n            background-image: url('data:image/svg+xml;charset=utf-8,<svg width=\\\"18\\\" height=\\\"18\\\" viewBox=\\\"0 0 34 34\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><title>Shape</title><path d=\\\"M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z\\\" fill=\\\"%23FFF\\\" fill-rule=\\\"evenodd\\\"/></svg>');\\n            right: 10px;\\n          }\\n          \\n          button.previous {\\n            background-image: url('data:image/svg+xml;charset=utf-8,<svg width=\\\"18\\\" height=\\\"18\\\" viewBox=\\\"0 0 34 34\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><title>Shape</title><path d=\\\"M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z\\\" fill=\\\"%23FFF\\\" fill-rule=\\\"evenodd\\\"/></svg>');\\n            left: 10px;\\n          }\\n        </style>\\n      \\n        <div id=\\\"paginated-gallery\\\" class=\\\"gallery\\\">\\n            <div class=\\\"gallery-scroller\\\"></div>\\n            <button class=\\\"previous\\\" aria-label=\\\"Previous\\\"></button>\\n            <button class=\\\"next\\\" aria-label=\\\"Next\\\" ></button>\\n        </div>\\n          `\\n  }\\n}\\n\\nwindow.customElements.define('scroll-snap-carousel', ScrollSnapCarousel)\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-03-26T00:40:09.091Z\",\"updated_at\":\"2024-06-22T14:22:40.260Z\",\"title\":\"Scroll Snap Carousel Web Component (No Shadow DOM)\",\"description\":\"Web Component that creates a scroll snap container without using the Shadow DOM.\",\"slug_hash\":\"jORwKQZ\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018e7833-4283-7e1a-9146-bdd4a75bb497\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-22d4d33aab19e5279e72.js"}