css+div实现一个图文幻灯片效果代码-html代码-BFW代码库

css+div实现一个图文幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：css+div实现一个图文幻灯片效果代码，布局使用了open-props

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@layer library, reset, base, utilities, components, layout, override;
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..600&display=swap')
layer(library.font);
@import 'https://unpkg.com/open-props' layer(library.design-system);
@import 'https://unpkg.com/open-props/normalize.light.min.css'
  layer(library.normalize);
@import 'https://unpkg.com/open-props/buttons.light.min.css'
  layer(library.buttons);

@layer demo {
  .section {
    background-color: white;
    display: grid;
    min-block-size: 800px;
    padding-block: var(--size-px-7);
    padding-inline: var(--size-px-7);
    place-items: center;
  }

  .container {
    container-type: inline-size;
    display: grid;
    inline-size: min(100%, 1064px);
    > * {
      grid-area: 1/1;
    }
  }

  .slider {
    -ms-overflow-style: none;
    border-radius: var(--radius-3);
    display: grid;
    grid-auto-flow: column;
    inline-size: 100%;
    overflow-x: auto;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-timeline: --section-wrapper inline;
    scrollbar-width: none;

    /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .card {
    background-image: linear-gradient(122deg, lavenderblush, lavender);
    border-radius: var(--radius-3);
    display: grid;
    gap: var(--size-px-5);
    inline-size: 100cqi;
    inset-inline-start: 0;
    padding-block: var(--size-px-10);
    padding-inline: var(--size-px-6);
    place-items: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    @supports not (-moz-appearance: none) {
      position: sticky;
    }

    @container (width >=860px) {
      gap: var(--size-px-9);
      grid-template-columns: 1fr 1fr;
      padding-inline: var(--size-px-10);
      place-items: center;
    }
  }

  .visual {
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);
    overflow: clip;
    @container (width >=860px) {
      max-block-size: 400px;
    }
  }

  .img {
    block-size: 100%;
    inline-size.........完整代码请登录后点击上方下载按钮下载查看