css+js实现图片列表横向幻灯片可切换滚动条效果代码-html代码-BFW代码库

css+js实现图片列表横向幻灯片可切换滚动条效果代码

代码语言：html

所属分类：幻灯片

代码描述：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-.........完整代码请登录后点击上方下载按钮下载查看