jQuery и CSS3 эффекты карусели.

Краткое руководство
Это специальный эффект полноэкранной карусели с полноэкранным представлением продукта на основе jQuery и CSS3. Специальный эффект изображения карусели подходит для представления товаров в торговом центре, он поддерживает устройства мобильных телефонов, и эффект очень крутой.

инструкции
Разместите на странице следующие файлы.

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 -->

Скопировать код