css+js实现图片列表横向幻灯片可切换滚动条效果代码
代码语言:html
所属分类:幻灯片
代码描述:css+js实现图片列表横向幻灯片可切换滚动条效果代码
代码标签: css js 图片 列表 横向 幻灯片 切换 滚动条
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import '//repo.bfw.wiki/bfwrepo/css/open-props.css' layer(design.system); @import '//repo.bfw.wiki/bfwrepo/css/open-props.normalize.light.min.css' layer(base.normalize); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap'); @layer base.carousel { section { container-type: inline-size; display: grid; place-items: center; gap: var(--size-7); inline-size: 100%; background-color: white; color: var(--gray-10); padding-block: var(--size-7); padding-inline: var(--size-3); } .carousel { display: grid; max-inline-size: 1600px; gap: var(--size-3); } header { display: grid; grid-auto-flow: column; justify-content: space-between; } h3 { font-weight: var(--font-weight-7); } .controls { direction: ltr; display: grid; grid-auto-flow: column; place-items: center; gap: 0.75rem; @media (width < 768px) { display: none; } } button { display: grid; place-items: center; inline-size: var(--size-8); block-size: var(--size-8); border-radius: var(--radius-round); background-color: var(--gray-3); transition: background-color 0.2s ease; &:hover { background-color: var(--gray-4); } &:focus { box-shadow: 0 0 0 2px var(--indigo-7); } &:focus-visible { box-shadow: unset; outline-offset: unset; } &:disabled { opacity: 0.3; cursor: not-allowed; } } .scroller { display: grid; grid-auto-flow: column; gap: var(--size-3); scroll-behavior: smooth; overflow-x: auto; padding-block-end: var(--size-6); scrollbar-width: thin; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; } .snap { scroll-snap-align: start; padding: 0; margin: 0; text-decoration: none; color: inherit; } figure { display: grid; grid-template-rows: 1fr min-content; inline-size: min(100cqi, 500px); place-items: start; gap: var(--size-3); } img { aspect-ratio: var(--ratio-square); object-fit: cover; background-color: white; block-size: 100%; } figcaption { font-size: var(--font-size-3); font-weight: var(--font-weight-5); } } @layer base.demo { /* just for demo */ body { font-family: 'Inter', sans-serif; display: grid; place-items: center; background-color: white; } } </style> </head> <body translate="no"> <section> <div class="carousel" aria-label="Featured Items Carousel" aria-roledescription="carousel" > <header> <h3>Featured</h3> <div class="controls"> <button id="prevBtn" aria-label="Previous" title="Previous" onclick="Scroller.scrollBy(-516, 0)" > <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" > <path d="M8.71833 15L0 7.5L8.71833 0L10 1.10257L2.56337 7.5L10 13.8974L8.71833 15Z" fill="black" /> </svg> </button> <button id="nextBtn" aria-label="Next" title="Next" onclick="Scroller.scrollBy(516, 0)" > <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" > <path d="M1.28167 15L10 7.5L1.28167 0L1.72702e-07 1.10257L7.43663 7.5L1.72702e-07 13.8974L1.28167 15Z" fill="black" /> </svg> </button> </div> </header> <div id="Scroller" class="scroller" role="group" aria-label="Items Scroller" aria-live="polite" > <a href="" class="snap" aria-label="1 of 6" aria-roledescription="item" > <figure> <picture> <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" alt="" loading="lazy" width="500" height="500" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0