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

代码语言：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%;
          height: auto;
        }
        
        button {
          appearance: none;
          cursor: pointer;
          border: 0;
          padding: 0;
        }
    </style>



</head>

<body>
    <div class="carousel" role="region" aria-label="gallery" x-data="carousel">
        <div class="relative">
            <!-- controls -->
            <ul aria-label="gallery controls" role="list">
                <li>
                    <button class="arrow arrow--prev" @click="go('prev')">
          <div class="sr-only">Previous</div>
          <svg height="13" width="13" aria-hidden="true" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg"><path d="M5 9.4.6 5 5 .6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
                </li>
                <li>
                    <button class="arrow arrow--next" @click="go('next')">
          <div class="sr-only">Next</div>
          <svg height="13" width="13" aria-hidden="true" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg"><path d="M1 .6 5.4 5 1 9.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
                </li>
            </ul>

            <!-- carousel scroller -->
            <ul class="carousel__scroll" :class="{
          'carousel__scroll--active': momentum.active,
          'carousel__scroll--dragging': momentum.dragging
        }" role="list" tabindex="0" aria-label="gallery images">
                <li class="carousel__slide">
                    <img class="image" src="//repo.bfw.wiki/bfwrepo/image/6284337bbaf11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_700,h_700,/quality,q_90" width="700" height="700" alt="" loading="lazy" decoding="async">
                </li>
                <li class="carousel__slide">
                    <img class="image" src="//repo.bfw.wiki/bfwrepo/image/628433e9efefa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_700,h_700,/quality,q_90" width="700" height="700" alt="" loading="lazy" decoding="async">
                </li>
                <li class="carousel__slide">
                    <img class="image" src="//repo.bfw.wiki/bfwrepo/image/628435b1bf789.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_700,h_700,/quality,q_90" width="700" height="700" alt="" loading="lazy" decoding="async">
                </li>
                <li class="carousel__slide">
                    <img class="image" src="//repo.bfw.wiki/bfwrepo/image/6284362753312.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_700,h_700,/quality,q_90" width="700" height="700" alt="" loading="lazy" decoding="async">
                </li>
                <li class="carousel__slide">
                    <img class="image" src="//repo.bfw.wiki/bfwrepo/image/628436604b2ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_700,h_700,/quality,q_90" width="700" height="700" alt="" loading="lazy" decoding="async">
                </li>
            </ul>
        </div>

        <ul class="pagination" role="list" aria-label="pagination">
            <li>
                <button class="pagination__item" @click="go(0)" :aria-pressed="(index === 0).toString()">
        <div class="sr-only">go to page 1 of 1</div>
        <img src="//repo.bfw.wiki/bfwrepo/image/6284337bbaf11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" width="40" height="40" alt="" loading="lazy" decoding="async">
      </button>
            </li>
            <li>
                <button class="pagination__item" @click="go(1)" :aria-pressed="(index === 1).toString()">
        <div class="sr-only">go to slide 2 of 5</div>
        <img src="//repo.bfw.wiki/bfwrepo/image/628433e9efefa.png?x-oss-process=image/auto-orient,1/.........完整代码请登录后点击上方下载按钮下载查看