帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

纯CSS旋转木马滑块特效 带导航箭头

帝国模板之家 2020-12-01 网页特效 评论

说明

HTML+CSS创建可定制的旋转木马特效,带有导航箭头,其中包含图片和描述。

使用方法

1.为导航箭头设置Awesome 5字体(可选)。

<script src="https://kit.fontawesome.com/c82ab85d43.js" crossorigin="anonymous"></script>

2.在页面加载css样式文件。

<link href=”main.css” rel=”stylesheet” />

3.创建图片和描述、导航箭头和分页点旋转木马html代码。

<section class="slider-wrapper">
  <input
    type="radio"
    name="slides"
    checked="checked"
    id="slide_1"
    hidden
    />
  <input type="radio" name="slides" id="slide_2" hidden />
  <input type="radio" name="slides" id="slide_3" hidden />
  <input type="radio" name="slides" id="slide_4" hidden />
  <input type="radio" name="slides" id="slide_5" hidden />
  <ul class="slider-slides">
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/16/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/24/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/26/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/28/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/34/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide #6</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/32/1920/400"
          alt=""
          />
      </div>
    </li>
  </ul>
  <div class="slider-arrows">
    <label class="slider-arrow" for="slide_1"></label>
    <label class="slider-arrow" for="slide_2"></label>
    <label class="slider-arrow" for="slide_3"></label>
    <label class="slider-arrow" for="slide_4"></label>
    <label class="slider-arrow" for="slide_5"></label>
    <label class="slider-arrow -go-to-first" for="slide_1"></label>
    <label class="slider-arrow -go-to-last" for="slide_5"></label>
  </div>
  <div class="slider-nav">
    <label class="slider-nav-item" for="slide_1"></label>
    <label class="slider-nav-item" for="slide_2"></label>
    <label class="slider-nav-item" for="slide_3"></label>
    <label class="slider-nav-item" for="slide_4"></label>
    <label class="slider-nav-item" for="slide_5"></label>
  </div>
</section>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言