CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

SVG Image Slideshow

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

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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);
  • transition duration: add a data-transition-duration equal to the custom duration (in milliseconds) for the SVG transition (default is 400).

Controls/Navigation theme colors

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:

Changelog

  • βœ… Set z-index value for the .svg-slideshow element
    πŸ—“ October 01, 2019
  • βœ… Component created
    πŸ—“ September 27, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

βœ… Project duplicated

βœ… Project created

There was an error while trying to export your project. Please try again or contact us