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

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

代码语言：html

所属分类：幻灯片

代码描述：alpinejs+css实现一个图片幻灯片效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .carousel {
          position: relative;
        }
        .carousel__scroll {
          display: flex;
          gap: 1rem;
          overflow: auto;
          cursor: grab;
          -webkit-overflow-scrolling: touch;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          user-select: none;
          background: #f8f8f8;
          scrollbar-width: none;
        }
        .carousel__scroll--active {
          scroll-snap-type: unset;
          scroll-behavior: unset;
        }
        .carousel__scroll--dragging {
          cursor: grabbing;
        }
        .carousel__scroll::-webkit-scrollbar {
          display: none;
        }
        .carousel__slide {
          scroll-snap-align: center;
          width: 100%;
          flex-shrink: 0;
        }
        
        .arrow {
          position: absolute;
          top: calc(50% - 1rem);
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2rem;
          height: 2rem;
          border-radius: 1rem;
          background: #9a3f20;
          color: #fff;
        }
        .arrow--prev {
          left: -1rem;
        }
        .arrow--next {
          right: -1rem;
        }
        
        .pagination {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.5rem;
          margin-top: 1rem;
        }
        .pagination__item {
          padding: 0.5rem;
          border: 1px solid transparent;
          transition: border-color 0.2s;
        }
        .pagination__item[aria-pressed=true] {
          border-color: #000;
        }
        
        /**
         * misc
         */
        .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
        }
        
        .relative {
          position: relative;
        }
        
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
        }
        
        body {
          max-width: 30rem;
          padding: 2rem;
          margin: 0 auto;
          font-family: system-ui;
        }
        
        img {
          display: block;
          width: 100%;
  .........完整代码请登录后点击上方下载按钮下载查看