[Picture Effects] jQuery и CSS3 эффекты карусели.

[Скопировать ссылку]
admin Опубликовано 23-12-2020 17:36:04 | Показать все сообщения |Режим чтения Печать Назад Вперед
jQuery и CSS3 эффекты карусели.

Краткое описание

Это специальный эффект полноэкранной карусели с полноэкранным представлением продукта на основе 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.     <!-- COIDEA:demo:slider:main:item START -->
  7.     <div class="ci-slider-container ci-active" data-slide="1">
  8.       <div class="ci-item ci-item-left">
  9.         <div class="content">
  10.           <p class="sub">New arrivals</p>
  11.           <h1 class="big"><a href="#">Street Style</a></h1>
  12.           <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>
  13.         </div>
  14.         <p class="background">Street</p>
  15.       </div>
  16.       <div class="ci-item ci-item-right"></div>
  17.       <img class="ci-image" src="assets/img/image-1.png" />
  18.     </div>
  19.     <!-- COIDEA:demo:slider:main:item END -->

  20.     <!-- COIDEA:demo:slider:main:item START -->
  21.     <div class="ci-slider-container animate--start" data-slide="2">
  22.       <div class="ci-item ci-item-left">
  23.         <div class="content">
  24.           <p class="sub">New arrivals</p>
  25.           <h1 class="big"><a href="#">Vintage Looks</a></h1>
  26.           <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>
  27.         </div>
  28.         <p class="background">Vintage</p>
  29.       </div>
  30.       <div class="ci-item ci-item-right"></div>
  31.       <img class="ci-image" src="assets/img/image-2.png" />
  32.     </div>
  33.     <!-- COIDEA:demo:slider:main:item END -->

  34.     <!-- COIDEA:demo:slider:main:item START -->
  35.     <div class="ci-slider-container animate--start" data-slide="3">
  36.       <div class="ci-item ci-item-left">
  37.         <div class="content">
  38.           <p class="sub">New arrivals</p>
  39.           <h1 class="big"><a href="#">Chic Style</a></h1>
  40.           <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>
  41.         </div>
  42.         <p class="background">Chic</p>
  43.       </div>
  44.       <div class="ci-item ci-item-right"></div>
  45.       <img class="ci-image" src="assets/img/image-3.png" />
  46.     </div>
  47.     <!-- COIDEA:demo:slider:main:item END -->

  48.   </div>
  49.   <!-- COIDEA:demo:slider:main END -->
  50.    
  51.   <!-- COIDEA:demo:slider:indicator START -->
  52.   <div class="slider-dots">
  53.     <a href="#" class="dot active" data-slide="1"><span></span>fashion</a>
  54.     <a href="#" class="dot" data-slide="2"><span></span>fashion</a>
  55.     <a href="#" class="dot" data-slide="3"><span></span>fashion</a>
  56.   </div>
  57.   <!-- COIDEA:demo:slider:indicator END -->

  58. </section>   
  59. <!-- COIDEA:demo END -->
Скопировать код


Сообщение слишком большое

Для просмотра Вам необходимо авторизироваться.
Если Вы еще не зарегистрированы, перейдите по ссылке: Регистрация.

x
Ответить

Магия Жалоба

Чтобы ответить, вам надо авторизироваться в системе Вход | Регистрация

Правила начислений  Разрешить ответные письма, чтобы напомнить автору

просм.1

подписок0

постов119

Опубликовать
Сектор творческих людей
Горячая линия

638638758

С понедельника по воскресенье с 9:00 до 23:00

Обратной связь

admin@artace.ru Онлайн

QR-код

Powered by Discuz! X3.4© 2001-2018 Comsenz Inc.