Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Плееры / Слайдеры
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    SVG слайдер изображений

    Дата добавления: 01.05.2017 - 12:56
    Добавил: Buger
    Количество просмотров: 2.1k
    Количество комментариев: 0
    Размер файла: 600.4 Kb
    Рейтинг материала: 5.0 / 1
    SVG слайдер изображений
    БЕСПЛАТНО
    Скачать файл с сервера
    рейтинг 5.0
    /
    голосов 1
    Простая, адаптивная карусель изображений.
    Ранее мы не раз экспериментировали с изображениями. Сегодня мы применим накопленный опыт и создадим адаптивный слайдер изображений.

    Структура HTML


    Структура состоит из ненумерованного списка (ul.cd-slider), в который поместим слайды, и два дополнительных элемента списка (ul.cd-slider-navigation и ol.cd-slider-controls) для элементов навигации.

    Каждый элемент списка ul.cd-slider будет состоять из svg (для изменения области обрезки слайд-изображения) и элемента (идентификатор атрибута обрезаемого элемента ).
    Код
    <div>
      <ul data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
      <li>
      <div>
      <svg viewBox="0 0 1400 800">
      <title>Aimated SVG</title>
      <defs>
      <clipPath id="cd-image-1">
      <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
      </clipPath>
      </defs>

      <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
      </svg>
      </div> <!-- .cd-svg-wrapper -->
      </li>

      <li>
      <div>
      <svg viewBox="0 0 1400 800">
      <!-- svg content here -->
      </svg>
      </div> <!-- .cd-svg-wrapper -->
      </li>

      <!-- other list items here -->

      </ul> <!-- .cd-slider -->

      <ul>
      <li><a href="#0">Next</a></li>
      <li><a href="#0">Prev</a></li>
      </ul> <!-- .cd-slider-navigation -->

      <ol>
      <li><a href="#0"><em>Item 1</em></a></li>
      <li><a href="#0"><em>Item 2</em></a></li>
      <!-- other list items here -->
      </ol> <!-- .cd-slider-controls -->
    </div> <!-- .cd-slider-wrapper -->


    Стили


    Структура слайдера предельно проста: к каждому слайду выставлен opacity: 0, позиция: absolute (top: 0 и left:0). Класс .visible будет добавляться к активному слайду, а .is-animating присваивается к тому элементу который анимируется в данный момент времени (z-index: 3, что поместит поверх элемента li.visible).
    Код
    .cd-slider > li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
    }
    .cd-slider > li.visible {
      position: relative;
      z-index: 2;
      opacity: 1;
    }
    .cd-slider > li.is-animating {
      z-index: 3;
      opacity: 1;
    }
    .cd-slider .cd-svg-wrapper {
      /* using padding Hack to fix bug on IE - svg height not properly calculated */
      height: 0;
      padding-bottom: 57.15%;
    }
    .cd-slider svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    Обработка событий


    Для реализации анимации мы задействуем атрибут 'd' элемента , входящего в .

    Далее определим значение атрибута data-stepn элемента .cd-slider, равный значению атрибута 'd' (чтобы было проще взаимодействовать через JavaScript).

    Сама анимация реализуется при вызове функции animate().
    Код
    clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
      clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
      oldSlide.removeClass('visible');
      newSlide.addClass('visible').removeClass('is-animating');
      });
    });

    Вдобавок мы реализовали перелистывание изображений посредством нажатия клавиш, а также тач-жестов.

    Источник: http://ruseller.com/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: