• milan_shubin
    19.09.2017 в 23:06

    Чтобы скачать надо приобрести V.I.P Группу!

  • Dimonnss666
    19.09.2017 в 22:12

    А где ссылка на скачивание?

  • milan_shubin
    11.09.2017 в 17:36

    кеукеукеукеукеукеукеукеукеку куеп
    упкуцепук

  • milan_shubin
    11.09.2017 в 17:30

    кекек

  • Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сегодняшние посетители:
    На сайте:
    Clipped SVG Slider (Circle) для uCoz
    Clipped SVG Slider (Circle) для uCoz-ранее представлялся подобный слайдер,но теперь мы видим изменились переключатели-сейчас они круглые,до это материала они были ромбовидные и как понятно переключатель играл роль картинки которая при клике становилась полноразмерной картинкой с красивым эффектом

    Установка: в верхней части сайта между head и /head прописать следующее

    Код
    <link rel="stylesheet" href="/clipped/css/clipped.css">


    В СSS

    Код
    @import url("/clipped/css/clipped.css");


    Это сам слайдер и его можно ставить где угодно

    Код
    <div class="cd-svg-clipped-slider" data-selected="M800,0c-60,0-348.815,0-400,0C348.816,0,43.667,0,0,0c0,40.667,0,348.815,0,400c0,51.185,0,335,0,400  
      c75,0,348.815,0,399.999,0C451.184,800,734,800,800,800c0-67,0-348.815,0-399.999C800,348.816,800,62,800,0z" data-lateral="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441  
      C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760  
      c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z">  
    <div class="gallery-wrapper">  
    <ul class="gallery">  
    <li class="left">  
    <div class="svg-wrapper">  
    <svg viewBox="0 0 800 800">  
    <defs>  
    <clipPath id="cd-image-1">  
    <path id="cd-morphing-path-1" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/>  
    </clipPath>  
    </defs>  
    <image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="/clipped/img/2.jpg"></image>  
    <use xlink:href="#cd-morphing-path-1" class="cover-layer" />  
    </svg>  
    </div>  
    </li>  
    <li class="selected">  
    <div class="svg-wrapper">  
    <svg viewBox="0 0 800 800">  
    <defs>  
    <clipPath id="cd-image-2">  
    <path id="cd-morphing-path-2" d="M800,0c-60,0-348.815,0-400,0C348.816,0,43.667,0,0,0c0,40.667,0,348.815,0,400c0,51.185,0,335,0,400 c75,0,348.815,0,399.999,0C451.184,800,734,800,800,800c0-67,0-348.815,0-399.999C800,348.816,800,62,800,0z"/>  
    </clipPath>  
    </defs>  
    <image height='800px' width="800px" clip-path="url(#cd-image-2)" xlink:href="/clipped/img/2.jpg"></image>  
    <use xlink:href="#cd-morphing-path-2" class="cover-layer" />  
    </svg>  
    </div>  
    </li>  
    <li class="right">  
    <div class="svg-wrapper">  
    <svg viewBox="0 0 800 800">  
    <title>Animated SVG</title>  
    <defs>  
    <clipPath id="cd-image-3">  
    <path id="cd-morphing-path-3" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/>  
    </clipPath>  
    </defs>  
    <image height='800px' width="800px" clip-path="url(#cd-image-3)" xlink:href="/clipped/img/3.jpg"></image>  
    <use xlink:href="#cd-morphing-path-3" class="cover-layer" />  
    </svg>  
    </div>  
    </li>  
    <li>  
    <div class="svg-wrapper">  
    <svg viewBox="0 0 800 800">  
    <defs>  
    <clipPath id="cd-image-4">  
    <path id="cd-morphing-path-4" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/>  
    </clipPath>  
    </defs>  
    <image height='800px' width="800px" clip-path="url(#cd-image-4)" xlink:href="/clipped/img/4.jpg"></image>  
    <use xlink:href="#cd-morphing-path-4" class="cover-layer" />  
    </svg>  
    </div>  
    </li>  
    <li>  
    <div class="svg-wrapper">  
    <svg viewBox="0 0 800 800">  
    <defs>  
    <clipPath id="cd-image-5">  
    <path id="cd-morphing-path-5" d="M654.559,145.441C584.264,75.148,492.133,40,400,40S215.736,75.148,145.441,145.441 C75.148,215.736,40,307.867,40,400s35.148,184.264,105.441,254.559C215.736,724.852,307.867,760,399.999,760 c92.133,0,184.265-35.148,254.559-105.441C724.852,584.264,760,492.133,760,400.001C760,307.869,724.852,215.736,654.559,145.441z"/>  
    </clipPath>  
    </defs>  
    <image height='800px' width="800px" clip-path="url(#cd-image-5)" xlink:href="/clipped/img/5.jpg"></image>  
    <use xlink:href="#cd-morphing-path-5" class="cover-layer" />  
    </svg>  
    </div>  
    </li>  
    </ul>  
    <nav>  
    <ul class="navigation">  
    <a href="javascript://" class="prev">Вперед</a>  
    <a href="javascript://" class="next">Назад</a>  
    </ul>  
    </nav>  
    </div>


    И для концовки этот код ставим в нижней части сайта перед /body

    Код
    <script src="/clipped/js/snap.svg-min.js"></script>  
    <script src="/clipped/js/main.js"></script>
    Автор материала:
    ...
    Логин на сайте: ...
    Группа: ...
    Статус: ...
    О материале:
    Дата добавления материала: 28.08.2016 в 06:09
    Материал просмотрен: 45 раз
    Категория материала: Скрипты
    К материалу оставлено: 0 комментариев

    Пожаловаться
    Сказать спасибо
    Источник
    Теги к материалу
    (Circle), Clipped, Slider, ucoz
    Поделись материалом с друзьями
    Рекомендуем к просмотру
    Всего комментариев: 0
    Обсуждение материала:
    Комментариев: 0
    avatar