Сегодня у нас речь пойдет о простом слайдере с изображениями предварительного просмотра и анимации с использованием свойств SVG. Данный скрипт наиболее хорошо будет смотреться в формате фото галереи или портфолио. Приятная анимация и изящное исполнение кода украсит абсолютно любой проект. Плюс данного слайдера в том, что можно использовать не ограниченно количество картинок и это ни как не повлияет на красоту. Картинки рекомендует использовать в виде квадратов, например: 400x400, 500x500, 600x600, 700x700. Самое главное, слайдер адаптивен под все мобильные устройства и поддерживается во всех браузерах.
1. Для начала скачиваете архив с нашего сайта и папку clipped загружаете в свой файловый менеджер.
Код
<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>
4. Ну и под конец подключаем js, естественно в нижнюю часть сайта перед закрывающим атрибутом </body>: