SVG Image Slideshow

Show a collection of images one at a time, using SVG clipping effects to transition between items.

How To

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:

• you can use only images (no text);
• all images need to have the same ratio (width/height);
• the image ratio has to be the same of the SVG viewBox.

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>

Slideshow Options

The slideshow comes with the following options:

• swipe on touch devices: add a data-swipe="on" to the .js-img-slideshow element (default is off);
• autoplay: add a 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;
• custom autoplay timing: add a 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;
• slideshow navigation: if you want to remove the dots navigation, add a data-navigation="off" (default is on).

Controls/Navigation theme colors

You can apply, to each slide element, a different theme color: you can use theColor 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 .

:sunrise: Demo images:

• Photo by Bench Accounting on Unsplash
• Photo by davisco on Unsplash
• Photo by Lucas Raggers on Unsplash
• Photo by Paweł Czerwiński on Unsplash