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