SVG Image Slideshow
Show a collection of images one at a time, using SVG clipping effects to transition between items.
Projects /
Projects /
Show a collection of images one at a time, using SVG clipping effects to transition between items.
The SVG Image Slideshow component is used to show a list of images one at a time.
To create the transition effect, we use the SVG clip-path element: when transitioning from one slide to another, the path of the clip element is changed to reveal the new image.
For the transition to work properly:
The image ratio in the demo is 16:9. We have created SVG clip elements for two other aspect ratio: 4:3 and 1:1.
Copy the SVG masks below if your ratio is not 16:9:
<!-- svg masks - arc (default) effect 1:1 -->
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M722,720C722,720,720,720,720,720C720,720,720.2,535.9,720.2,344.2C720.2,152.5,720,0,720,0C720,0,721,0,721,0C721.5,0,722,0.5,722,1C722,1,722,720,722,720C722,720,722,720,722,720"></path>
<path d="M722,720C722,720,434,720,434,720C434,720,161,604.7,161,360C161,122,434,0,434,0C434,0,721,0,721,0C721.5,0,722,0.5,722,1C722,1,722,720,722,720C722,720,722,720,722,720"></path>
<path d="M722,720C722,720,-2,720,-2,720C-2,720,-2,604.7,-2,360C-2,122,-2,0,-2,0C-2,0,721,0,721,0C721.5,0,722,0.5,722,1C722,1,722,720,722,720C722,720,722,720,722,720"></path>
</g>
</svg>
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,0,0,0,0C0,0,-0.20000000000004547,152.5,-0.20000000000004547,344.2C-0.20000000000004547,535.9,0,720,0,720C0,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,286,0,286,0C286,0,559,122,559,360C559,604.7,286,720,286,720C286,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,722,0,722,0C722,0,722,122,722,360C722,604.7,722,720,722,720C722,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
</g>
</svg>
<!-- svg masks - skew effect 1:1 -->
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M722,720C722,720,720,720,720,720C720,720,720,0,720,0C720,0,721,0,721,0C721.5,0,722,0.5,722,1C722,1,722,720,722,720C722,720,722,720,722,720C722,720,722,720,722,720"></path>
<path d="M722,720C722,720,152,720,152,720C152,720,529,0,529,0C529,0,721,0,721,0C721.5,0,722,0.5,722,1C722,1,722,720,722,720C722,720,722,720,722,720C722,720,722,720,722,720"></path>
<path d="M722,720C722,720,-2,720,-2,720C-2,720,-2,0,-2,0C-2,0,721,0,721,0C721.5,0,722,0.5,722,1C722,1,722,720,722,720C722,720,722,720,722,720C722,720,722,720,722,720"></path>
</g>
</svg>
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,0,0,0,0C0,0,0,720,0,720C0,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,191,0,191,0C191,0,568,720,568,720C568,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,722,0,722,0C722,0,722,720,722,720C722,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
</g>
</svg>
<!-- svg masks - circle effect 1:1 -->
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M722.9,357.9C723.5,357.29999999999995,724.3,357,725,357C725.7,357,726.5,357.3,727.1,357.9C728.3000000000001,359.09999999999997,728.3000000000001,361,727.1,362.2C725.9,363.4,724,363.4,722.8000000000001,362.2C721.7,361,721.7,359,722.9,357.9C722.9,357.9,722.9,357.9,722.9,357.9C722.9,357.9,722.9,357.9,722.9,357.9"></path>
<path d="M148.70000000000005,-216.29999999999995C307.79999999999995,-375.4000000000001,516.4,-455,725,-455C933.6,-455,1142.2,-375.4,1301.3,-216.29999999999995C1619.6,102,1619.6,618,1301.3,936.3C983,1254.6,467,1254.6,148.70000000000005,936.3C-169.5999999999999,618,-169.5999999999999,102,148.70000000000005,-216.3C148.70000000000005,-216.3,148.70000000000005,-216.29999999999995,148.70000000000005,-216.29999999999995C148.70000000000005,-216.29999999999995,148.70000000000005,-216.29999999999995,148.70000000000005,-216.29999999999995"></path>
</g>
</svg>
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-5.099999999999909,357.9C-4.5,357.29999999999995,-3.7000000000000455,357,-3,357C-2.2000000000000455,357,-1.5,357.3,-0.900000000000091,357.9C0.2999999999999545,359.09999999999997,0.2999999999999545,361,-0.900000000000091,362.2C-2.099999999999909,363.4,-4,363.4,-5.2000000000000455,362.2C-6.2999999999999545,361,-6.2999999999999545,359,-5.099999999999909,357.9C-5.099999999999909,357.9,-5.099999999999909,357.9,-5.099999999999909,357.9C-5.099999999999909,357.9,-5.099999999999909,357.9,-5.099999999999909,357.9"></path>
<path d="M-579.3,-216.29999999999995C-420.20000000000005,-375.4000000000001,-211.5999999999999,-455,-3,-455C205.5999999999999,-455,414.20000000000005,-375.4,573.3,-216.29999999999995C891.6,102,891.6,618,573.3,936.3C255,1254.6,-261,1254.6,-579.3,936.3C-897.5999999999999,618,-897.5999999999999,102,-579.3,-216.3C-579.3,-216.3,-579.3,-216.29999999999995,-579.3,-216.29999999999995C-579.3,-216.29999999999995,-579.3,-216.29999999999995,-579.3,-216.29999999999995"></path>
</g>
</svg>
<!-- svg masks - step effect 1:1 -->
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M722,241C722,241,720,241,720,241C720,241,720,0,720,0C720,0,721,0,721,0C721.6,0,722,0.4,722,1C722,1,722,241,722,241C722,241,722,241,722,241C722,241,722,241,722,241"></path>
<path d="M722,241C722,241,-2,241,-2,241C-2,241,-2,0,-2,0C-2,0,721,0,721,0C721.6,0,722,0.4,722,1C722,1,722,241,722,241C722,241,722,241,722,241C722,241,722,241,722,241"></path>
</g>
<g>
<path d="M722,480C722,480,720,480,720,480C720,480,720,240,720,240C720,240,721,240,721,240C721.6,240,722,240.4,722,241C722,241,722,480,722,480C722,480,722,480,722,480C722,480,722,480,722,480"></path>
<path d="M722,480C722,480,-2,480,-2,480C-2,480,-2,240,-2,240C-2,240,721,240,721,240C721.6,240,722,240.4,722,241C722,241,722,480,722,480C722,480,722,480,722,480C722,480,722,480,722,480"></path>
</g>
<g>
<path d="M722,720C722,720,720,720,720,720C720,720,720,479,720,479C720,479,721,479,721,479C721.6,479,722,479.4,722,480C722,480,722,720,722,720C722,720,722,720,722,720C722,720,722,720,722,720"></path>
<path d="M722,720C722,720,-2,720,-2,720C-2,720,-2,479,-2,479C-2,479,721,479,721,479C721.6,479,722,479.4,722,480C722,480,722,720,722,720C722,720,722,720,722,720C722,720,722,720,722,720"></path>
</g>
</svg>
<svg viewBox="0 0 720 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-2,241C-2,241,0,241,0,241C0,241,0,0,0,0C0,0,-1,0,-1,0C-1.599999999999909,0,-2,0.4,-2,1C-2,1,-2,241,-2,241C-2,241,-2,241,-2,241C-2,241,-2,241,-2,241"></path>
<path d="M-2,241C-2,241,722,241,722,241C722,241,722,0,722,0C722,0,-1,0,-1,0C-1.599999999999909,0,-2,0.4,-2,1C-2,1,-2,241,-2,241C-2,241,-2,241,-2,241C-2,241,-2,241,-2,241"></path>
</g>
<g>
<path d="M-2,480C-2,480,0,480,0,480C0,480,0,240,0,240C0,240,-1,240,-1,240C-1.599999999999909,240,-2,240.4,-2,241C-2,241,-2,480,-2,480C-2,480,-2,480,-2,480C-2,480,-2,480,-2,480"></path>
<path d="M-2,480C-2,480,722,480,722,480C722,480,722,240,722,240C722,240,-1,240,-1,240C-1.599999999999909,240,-2,240.4,-2,241C-2,241,-2,480,-2,480C-2,480,-2,480,-2,480C-2,480,-2,480,-2,480"></path>
</g>
<g>
<path d="M-2,720C-2,720,0,720,0,720C0,720,0,479,0,479C0,479,-1,479,-1,479C-1.599999999999909,479,-2,479.4,-2,480C-2,480,-2,720,-2,720C-2,720,-2,720,-2,720C-2,720,-2,720,-2,720"></path>
<path d="M-2,720C-2,720,722,720,722,720C722,720,722,479,722,479C722,479,-1,479,-1,479C-1.599999999999909,479,-2,479.4,-2,480C-2,480,-2,720,-2,720C-2,720,-2,720,-2,720C-2,720,-2,720,-2,720"></path>
</g>
</svg>
<!-- svg masks - arc (default) effect 4:3 -->
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M962,720C962,720,960,720,960,720C960,720,960.2,535.9,960.2,344.2C960.2,152.5,960,0,960,0C960,0,961,0,961,0C961.5,0,962,0.5,962,1C962,1,962,720,962,720C962,720,962,720,962,720"></path>
<path d="M962,720C962,720,507,720,507,720C507,720,234,604.7,234,360C234,122,507,0,507,0C507,0,961,0,961,0C961.5,0,962,0.5,962,1C962,1,962,720,962,720C962,720,962,720,962,720"></path>
<path d="M962,720C962,720,-2,720,-2,720C-2,720,-2,604.7,-2,360C-2,122,-2,0,-2,0C-2,0,961,0,961,0C961.5,0,962,0.5,962,1C962,1,962,720,962,720C962,720,962,720,962,720"></path>
</g>
</svg>
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,0,0,0,0C0,0,-0.20000000000004547,152.5,-0.20000000000004547,344.2C-0.20000000000004547,535.9,0,720,0,720C0,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,453,0,453,0C453,0,726,122,726,360C726,604.7,453,720,453,720C453,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,962,0,962,0C962,0,962,122,962,360C962,604.7,962,720,962,720C962,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
</g>
</svg>
<!-- svg masks - skew effect 4:3 -->
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M962,720C962,720,960,720,960,720C960,720,960,0,960,0C960,0,961,0,961,0C961.5,0,962,0.5,962,1C962,1,962,720,962,720C962,720,962,720,962,720C962,720,962,720,962,720"></path>
<path d="M962,720C962,720,187,720,187,720C187,720,564,0,564,0C564,0,961,0,961,0C961.5,0,962,0.5,962,1C962,1,962,720,962,720C962,720,962,720,962,720C962,720,962,720,962,720"></path>
<path d="M962,720C962,720,-2,720,-2,720C-2,720,-2,0,-2,0C-2,0,961,0,961,0C961.5,0,962,0.5,962,1C962,1,962,720,962,720C962,720,962,720,962,720C962,720,962,720,962,720"></path>
</g>
</svg>
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,0,0,0,0C0,0,0,720,0,720C0,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,396,0,396,0C396,0,773,720,773,720C773,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.5,-1.5,0,-1,0C-1,0,962,0,962,0C962,0,962,720,962,720C962,720,-2,720,-2,720C-2,720,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
</g>
</svg>
<!-- svg masks - circle effect 4:3 -->
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M961.5,356.5C962.5,355.5,963.8,355,965,355C966.2,355,967.6,355.5,968.5,356.5C970.5,358.5,970.5,361.6,968.5,363.6C966.5,365.6,963.4,365.6,961.4,363.6C959.5,361.6,959.5,358.4,961.5,356.5C961.5,356.5,961.5,356.5,961.5,356.5C961.5,356.5,961.5,356.5,961.5,356.5"></path>
<path d="M231.70000000000005,-373.29999999999995C434.20000000000005,-575.8,699.6,-677,965,-677C1230.4,-677,1495.8,-575.8,1698.3,-373.29999999999995C2103.3,31.69999999999999,2103.3,688.3,1698.3,1093.3C1293.2999999999997,1498.3,636.7,1498.3,231.70000000000005,1093.3C-173.29999999999995,688.3,-173.20000000000005,31.7,231.70000000000005,-373.3C231.70000000000005,-373.3,231.70000000000005,-373.29999999999995,231.70000000000005,-373.29999999999995C231.70000000000005,-373.29999999999995,231.70000000000005,-373.29999999999995,231.70000000000005,-373.29999999999995"></path>
</g>
</svg>
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-8.5,356.5C-7.5,355.5,-6.2000000000000455,355,-5,355C-3.7999999999999545,355,-2.400000000000091,355.5,-1.5,356.5C0.5,358.5,0.5,361.6,-1.5,363.6C-3.5,365.6,-6.599999999999909,365.6,-8.599999999999909,363.6C-10.5,361.6,-10.5,358.4,-8.5,356.5C-8.5,356.5,-8.5,356.5,-8.5,356.5C-8.5,356.5,-8.5,356.5,-8.5,356.5"></path>
<path d="M-738.3000000000002,-373.29999999999995C-535.8,-575.8,-270.4000000000001,-677,-5,-677C260.4000000000001,-677,525.8,-575.8,728.3,-373.29999999999995C1133.3,31.69999999999999,1133.3,688.3,728.3,1093.3C323.29999999999995,1498.3,-333.29999999999995,1498.3,-738.3000000000002,1093.3C-1143.2999999999997,688.3,-1143.1999999999998,31.7,-738.3000000000002,-373.3C-738.3000000000002,-373.3,-738.3000000000002,-373.29999999999995,-738.3000000000002,-373.29999999999995C-738.3000000000002,-373.29999999999995,-738.3000000000002,-373.29999999999995,-738.3000000000002,-373.29999999999995"></path>
</g>
</svg>
<!-- svg masks - step effect 4:3 -->
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M962,241C962,241,960,241,960,241C960,241,960,0,960,0C960,0,961,0,961,0C961.6,0,962,0.4,962,1C962,1,962,241,962,241C962,241,962,241,962,241C962,241,962,241,962,241"></path>
<path d="M962,241C962,241,-2,241,-2,241C-2,241,-2,0,-2,0C-2,0,961,0,961,0C961.6,0,962,0.4,962,1C962,1,962,241,962,241C962,241,962,241,962,241C962,241,962,241,962,241"></path>
</g>
<g>
<path d="M962,480C962,480,960,480,960,480C960,480,960,240,960,240C960,240,961,240,961,240C961.6,240,962,240.4,962,241C962,241,962,480,962,480C962,480,962,480,962,480C962,480,962,480,962,480"></path>
<path d="M962,480C962,480,-2,480,-2,480C-2,480,-2,240,-2,240C-2,240,961,240,961,240C961.6,240,962,240.4,962,241C962,241,962,480,962,480C962,480,962,480,962,480C962,480,962,480,962,480"></path>
</g>
<g>
<path d="M962,720C962,720,960,720,960,720C960,720,960,479,960,479C960,479,961,479,961,479C961.6,479,962,479.4,962,480C962,480,962,720,962,720C962,720,962,720,962,720C962,720,962,720,962,720"></path>
<path d="M962,720C962,720,-2,720,-2,720C-2,720,-2,479,-2,479C-2,479,961,479,961,479C961.6,479,962,479.4,962,480C962,480,962,720,962,720C962,720,962,720,962,720C962,720,962,720,962,720"></path>
</g>
</svg>
<svg viewBox="0 0 960 720" class="js-svg-slideshow__mask is-hidden">
<g>
<path d="M-2,1C-2,0.39999999999997726,-1.599999999999909,0,-1,0C-1,0,0,0,0,0C0,0,0,241,0,241C0,241,-2,241,-2,241C-2,241,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
<path d="M-2,1C-2,0.39999999999997726,-1.599999999999909,0,-1,0C-1,0,962,0,962,0C962,0,962,241,962,241C962,241,-2,241,-2,241C-2,241,-2,1,-2,1C-2,1,-2,1,-2,1C-2,1,-2,1,-2,1"></path>
</g>
<g>
<path d="M-2,241C-2,240.39999999999998,-1.599999999999909,240,-1,240C-1,240,0,240,0,240C0,240,0,480,0,480C0,480,-2,480,-2,480C-2,480,-2,241,-2,241C-2,241,-2,241,-2,241C-2,241,-2,241,-2,241"></path>
<path d="M-2,241C-2,240.39999999999998,-1.599999999999909,240,-1,240C-1,240,962,240,962,240C962,240,962,480,962,480C962,480,-2,480,-2,480C-2,480,-2,241,-2,241C-2,241,-2,241,-2,241C-2,241,-2,241,-2,241"></path>
</g>
<g>
<path d="M-2,480C-2,479.4,-1.599999999999909,479,-1,479C-1,479,0,479,0,479C0,479,0,720,0,720C0,720,-2,720,-2,720C-2,720,-2,480,-2,480C-2,480,-2,480,-2,480C-2,480,-2,480,-2,480"></path>
<path d="M-2,480C-2,479.4,-1.599999999999909,479,-1,479C-1,479,962,479,962,479C962,479,962,720,962,720C962,720,-2,720,-2,720C-2,720,-2,480,-2,480C-2,480,-2,480,-2,480C-2,480,-2,480,-2,480"></path>
</g>
</svg>The slideshow comes with the following options:
data-swipe="on" to the .js-img-slideshow element (default is off);data-autoplay="on" to the .js-img-slideshow element (default is off). Autoplay is automatically paused when user hovers over the slideshow element, interacts with the slide contents or the slideshow navigation/controls;data-autoplay-interval equal to the custom duration (in milliseconds) that you want to use (default is 5000). This option is effective only if data-autoplay is on;data-navigation="off" (default is on);data-transition-duration equal to the custom duration (in milliseconds) for the SVG transition (default is 400).You can apply, to each slide element, a different theme color: you can use the Color Editor to generate your theme, and then apply it to a .img-slideshow__item element using data-theme="themeName".
In this case, the plugin will automatically update the theme of the slideshow controls (equal to the theme of the current slide) so that their visibility is not affected.
You can read more about creating color themes with the CodyHouse framework on our Colors documentation page.
🌅 Demo images:
