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

代码语言：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: 100%;
    object-fit: cover;
    background-image: var(--gradient-6);
  }

  .content {
    display: grid;
    gap: var(--size-px-8);

    @container (width >=860px) {
      gap: var(--size-px-5);
      place-items: center start;
    }
  }

  .meta {
    display: grid;
    gap: var(--size-px-2);
  }

  .title {
    font-family: var(--font-neo-grotesque);
    font-size: 1.75rem;
    font-weight: var(--font-weight-4);
    text-wrap: balance;

    @container (width >=860px) {
      font-size: var(--font-size-5);
    }
  }

  .desc {
    font-family: var(--font-neo-grotesque);
    font-size: var(--font-size-2);
    max-inline-size: var(--size-content-2);
    text-wrap: pretty;
  }

  .card-actions {
    display: grid;
    gap: var(--size-px-2);
    place-items: start;

    @container (width >=860px) {
      gap: var(--size-px-3);
      grid-auto-flow: column;
    }
  }

  .common-btn {
    --_bg: linear-gradient(aliceblue, aliceblue),
      linear-gradient(to right, deepskyblue, royalblue);
    --_border: transparent;
    --_ink-shadow: none;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    border-radius: var(--radius-4);
    font-family: var(--font-neo-grotesque);
    font-size: 0.875rem;
    font-weight: var(--font-weight-5);
    inline-size: max-content;
    min-block-size: 40px;
    text-decoration: none;
  }

  .primary {
    --_bg: linear-gradient(deepskyblue, royalblue);
    --_border: deepskyblue;
    --_text: white;
    border-width: 0;
  }

  .slider-controls {
    display: grid;
    place-items: center;
    padding-block: var(--size-px-9);
  }

  .slider-controls-wrapper {
    display: grid;
    grid-auto-flow: column;
    inline-size: calc(100% + 2rem);
    justify-content: space-between;
    place-items: center;

    @container (width >=860px) {
      inline-size: 100%;
      padding: var(--size-px-2);
    }

    /* Remove this block to show slider controls on mobile */
    @container (width < 860px) {
      display: none;
    }
  }

  .control-button {
    block-size: var(--size-px-8);
    border-radius: var(--radius-round);
    display: inline-grid;
    inline-size: var(--size-px-8);
    padding: var(--size-px-1);
    place-items: center;
    z-index: var(--layer-4);

    & .........完整代码请登录后点击上方下载按钮下载查看