幻灯片/轮播

CSS3全屏商品轮播图jQuery特效

面包多

CSS3全屏商品轮播图jQuery特效-创客云
这是一款 jQuery 和 CSS3 响应式全屏商品介绍轮播图特效。该轮播图特效适用于商城的商品介绍,它支持移动手机设备,效果非常炫酷。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
WordPress 主题
  1. <link rel="stylesheet" type="text/css" href="assets/css/base.css" />
  2. <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
  3. <script src="assets/js/jquery.min.js" type="text/javascript"></script>
  4. <script src="assets/js/demo.js"></script>

HTML 结构

轮播图的基本 HTML DOM 结构如下:

  1. <!-- COIDEA:demo START -->
  2. <section id="ci-slider">
  3.  
  4.   <!-- COIDEA:demo:slider:main START -->
  5.   <div class="ci-slider-holder">
  6.  
  7.     <!-- COIDEA:demo:slider:main:item START -->
  8.     <div class="ci-slider-container ci-active" data-slide="1">
  9.       <div class="ci-item ci-item-left">
  10.         <div class="content">
  11.           <p class="sub">New arrivals</p>
  12.           <h1 class="big"><a href="#">Street Style</a></h1>
  13.           <p class="normal">I love a black wedding dress. I like the irony in my work. I truly believe that philanthropy and commerce can work together. <span>Fashion should be fun. It shouldn't be labelled intellectual. If I had the power, I would ban leggings.</span></p>
  14.         </div>
  15.         <p class="background">Street</p>
  16.       </div>
  17.       <div class="ci-item ci-item-right"></div>
  18.       <img class="ci-image" src="assets/img/image-1.png" />
  19.     </div>
  20.     <!-- COIDEA:demo:slider:main:item END -->
  21.  
  22.     <!-- COIDEA:demo:slider:main:item START -->
  23.     <div class="ci-slider-container animate--start" data-slide="2">
  24.       <div class="ci-item ci-item-left">
  25.         <div class="content">
  26.           <p class="sub">New arrivals</p>
  27.           <h1 class="big"><a href="#">Vintage Looks</a></h1>
  28.           <p class="normal">Fashion fades, only style remains the same. I always loved aesthetics. Not particularly fashion, but an idea of beauty.<span>We must never confuse elegance with snobbery. The great thing about fashion is that it always looks forward. It's useless to send models out on the runway to cry.</span></p>
  29.         </div>
  30.         <p class="background">Vintage</p>
  31.       </div>
  32.       <div class="ci-item ci-item-right"></div>
  33.       <img class="ci-image" src="assets/img/image-2.png" />
  34.     </div>
  35.     <!-- COIDEA:demo:slider:main:item END -->
  36.  
  37.     <!-- COIDEA:demo:slider:main:item START -->
  38.     <div class="ci-slider-container animate--start" data-slide="3">
  39.       <div class="ci-item ci-item-left">
  40.         <div class="content">
  41.           <p class="sub">New arrivals</p>
  42.           <h1 class="big"><a href="#">Chic Style</a></h1>
  43.           <p class="normal">I try as much as possible to give you a great basic product and what comes out, I feel, is really amazing. <span>Fashion fades, only style remains the same. Give me time and I'll give you a revolution. Fashion can be this mysterious thing that you can't explain. My customers are successful workingwomen.</span></p>
  44.         </div>
  45.         <p class="background">Chic</p>
  46.       </div>
  47.       <div class="ci-item ci-item-right"></div>
  48.       <img class="ci-image" src="assets/img/image-3.png" />
  49.     </div>
  50.     <!-- COIDEA:demo:slider:main:item END -->
  51.  
  52.   </div>
  53.   <!-- COIDEA:demo:slider:main END -->
  54.  
  55.   <!-- COIDEA:demo:slider:indicator START -->
  56.   <div class="slider-dots">
  57.     <a href="#" class="dot active" data-slide="1"><span></span>fashion</a>
  58.     <a href="#" class="dot" data-slide="2"><span></span>fashion</a>
  59.     <a href="#" class="dot" data-slide="3"><span></span>fashion</a>
  60.   </div>
  61.   <!-- COIDEA:demo:slider:indicator END -->
  62.  
  63. </section>   
  64. <!-- COIDEA:demo END -->

Github 网址:https://github.com/COIDEAwebsite/fullscreen-slice-hero-slider

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!