diff --git a/.gitignore b/.gitignore
index 53eb54cd..f37acbde 100644
--- a/.gitignore
+++ b/.gitignore
@@ -178,4 +178,5 @@ temp/
 .svelte-kit/
 dist/
 graphics-pack/
-!dist/package.json
\ No newline at end of file
+!dist/package.json
+project-files
\ No newline at end of file
diff --git a/src/lib/BeforeAfterSlider/docs.svx b/src/lib/BeforeAfterSlider/docs.svx
new file mode 100644
index 00000000..20af1d9d
--- /dev/null
+++ b/src/lib/BeforeAfterSlider/docs.svx
@@ -0,0 +1,52 @@
+---
+title: BeforeAfterImageSlider
+description: A slider for showing before/after images
+slug: before-after-slider
+---
+
+<script>
+  import DemoContainer from '../_docs/DemoContainer/index.svelte';
+  import BeforeAfterImageSlider from './index.svelte';
+  import { assets } from '$app/paths';
+</script>
+
+<section>
+
+## {title}
+
+{description}
+
+</section>
+
+```svelte
+<script>
+  import { BeforeAfterImageSlider } from '@reuters-graphics/graphics-svelte-components';
+  import { assets } from '$app/paths';
+</script>
+
+<BeforeAfterImageSlider
+  fNames = "{[
+    {
+      path: `${assets}/images/graphics/before.png`,
+      label: 'Before',
+    },
+    {
+      path: `${assets}/images/graphics/after.png`,
+      label: 'After',
+    }
+  ]}",
+  width = "body-text"
+/>
+```
+
+<DemoContainer>
+  <BeforeAfterImageSlider
+    fNames={[{
+        path: `${assets}/images/graphics/poyang-before.jpg`,
+        label: 'Jan. 1997'
+      }, {
+        path: `${assets}/images/graphics/poyang-after.jpg`,
+        label: 'Dec. 2019'
+      }]}
+  />
+</DemoContainer>
\ No newline at end of file
diff --git a/src/lib/BeforeAfterSlider/index.svelte b/src/lib/BeforeAfterSlider/index.svelte
new file mode 100644
index 00000000..14a815eb
--- /dev/null
+++ b/src/lib/BeforeAfterSlider/index.svelte
@@ -0,0 +1,178 @@
+<script>
+  /*
+  partly copied from: https://codepen.io/josephwong2004/pen/NWRGxdR
+  Ticks through images with a dot indicator on top
+  Example: https://www.dropbox.com/s/clzcs8bwzm5lw3o/ImageTicker.mp4?dl=0
+  @props
+    fNames: array of objects with following properties:
+    [
+      {
+        path: 'path/to/file',
+        label: 'Label for the top of the ticker'
+      },
+      ...
+    ]
+    width: string - body-text | wide | wider | fluid
+  */
+
+  export let fNames = [];
+  export let width = 'body-text';
+
+  let sliderPos = 50;
+  let slider = null;
+  let beforeImg = null;
+
+  import { onMount } from 'svelte';
+
+  // Call any extra, non-svelte JS after the component "mounts"
+  // so we're sure svelte is done doing its bit and
+  // we can then do whatever DOM manipulations we want.
+  onMount(() => {});
+</script>
+
+<section id="ba-container" class="{width} mt-5 mb-5">
+  <div id="ba-photo-container">
+    <div class="ba-before-container">
+      <div
+        class="ba-label ba-label-before"
+        style="clip-path: inset(0 {100 - sliderPos + 1}% 0 0);"
+      >
+        {fNames[0].label}
+      </div>
+      <img
+        bind:this="{beforeImg}"
+        class="ba-image ba-before"
+        alt="Before"
+        src="{fNames[0].path}"
+        style="clip-path: inset(0 {100 - sliderPos}% 0 0);"
+      />
+    </div>
+
+    <div class="ba-after-container">
+      <div class="ba-label ba-label-after">{fNames[1].label}</div>
+      <img class="ba-image ba-after" alt="After" src="{fNames[1].path}" />
+    </div>
+
+    <input
+      bind:value="{sliderPos}"
+      bind:this="{slider}"
+      type="range"
+      min="1"
+      max="100"
+      class="slider"
+      name="slider"
+      id="ba-slider"
+    />
+
+    <!-- <div class="slider-button" style="left: calc({sliderPos}% - 13px);"></div> -->
+  </div>
+</section>
+
+<style type="text/scss">
+  #ba-container {
+    #ba-photo-container {
+      position: relative;
+      .ba-image {
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+      }
+      @mixin center() {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .slider {
+        position: absolute;
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 100%;
+        background: none;
+        outline: none;
+        margin: 0;
+        bottom: 0;
+        left: 0;
+        top: 0;
+        @include center;
+        &::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 3px;
+          height: 100%;
+          background: white;
+          cursor: pointer;
+        }
+        &::-moz-range-thumb {
+          width: 3px;
+          height: 100%;
+          background: white;
+          cursor: pointer;
+        }
+      }
+
+      .slider-button {
+        $size: 20px;
+        position: absolute;
+        pointer-events: none;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: white;
+        border: 1px solid #5d5d5d90;
+        top: 100%;
+        @include center;
+
+        // @mixin arrow-helper() {
+        //   content: '';
+        //   padding: 2px;
+        //   display: inline-block;
+        //   border: solid #5d5d5d;
+        //   border-width: 0 1px 1px 0;
+        // }
+        // &:after {
+        //   @include arrow-helper();
+        //   transform: rotate(-45deg);
+        // }
+        // &:before {
+        //   @include arrow-helper();
+        //   transform: rotate(135deg);
+        // }
+      }
+    }
+
+    .ba-label {
+      font-size: 1.2rem;
+      font-family: sans-serif;
+      color: white;
+      text-shadow: 1px 1px 1px black;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      display: inline-block;
+      z-index: 1;
+      &.ba-label-before {
+        padding-left: 5px;
+      }
+      &.ba-label-after {
+        text-align: right;
+        padding-right: 5px;
+      }
+    }
+
+    // z indexing
+    .ba-before-container {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+    .ba-after-container {
+      position: relative;
+      z-index: 0;
+    }
+    .slider {
+      z-index: 2;
+    }
+  }
+</style>
diff --git a/src/lib/ImageTicker/docs.svx b/src/lib/ImageTicker/docs.svx
new file mode 100644
index 00000000..0e198ff8
--- /dev/null
+++ b/src/lib/ImageTicker/docs.svx
@@ -0,0 +1,78 @@
+---
+title: ImageTicker
+description: An image slideshow
+slug: image-ticker
+---
+
+<script>
+  import DemoContainer from '../_docs/DemoContainer/index.svelte';
+  import ImageTicker from './index.svelte';
+  import { assets } from '$app/paths';
+</script>
+
+<section>
+
+## {title}
+
+{description}
+
+</section>
+
+```svelte
+<script>
+  import { ImageTicker } from '@reuters-graphics/graphics-svelte-components';
+  import { assets } from '$app/paths';
+</script>
+
+<ImageTicker
+  fNames="{[
+    {
+      path: `${assets}/images/graphics/step-1-md.png`,
+      label: 'Image No. 1',
+    },
+    {
+      path: `${assets}/images/graphics/step-2-md.png`,
+      label: 'Image No. 2',
+    },
+    {
+      path: `${assets}/images/graphics/step-3-md.png`,
+      label: 'Image No. 3',
+    },
+  ]}"
+  interval="{1500}"
+/>
+```
+
+<DemoContainer>
+  <h5 style="text-align: center;">Autoplay image ticker and label top centre</h5>
+  <ImageTicker
+    fNames={[{
+        path: `${assets}/images/graphics/step-1-md.png`,
+        label: 'Image No. 1'
+      }, {
+        path: `${assets}/images/graphics/step-2-md.png`,
+        label: 'Image No. 2'
+      }, {
+        path: `${assets}/images/graphics/step-3-md.png`,
+        label: 'Image No. 3'
+    }]}
+  />
+</DemoContainer>
+
+<DemoContainer>
+  <h5 style="text-align: center;">Button controlled image ticker and label on the bottom left</h5>
+  <ImageTicker
+    fNames={[{
+        path: `${assets}/images/graphics/step-1-md.png`,
+        label: 'Image No. 1'
+      }, {
+        path: `${assets}/images/graphics/step-2-md.png`,
+        label: 'Image No. 2'
+      }, {
+        path: `${assets}/images/graphics/step-3-md.png`,
+        label: 'Image No. 3'
+    }]}
+    control= "button",
+    labelPosition = "bl"
+  />
+</DemoContainer>
diff --git a/src/lib/ImageTicker/index.svelte b/src/lib/ImageTicker/index.svelte
new file mode 100644
index 00000000..4787dc05
--- /dev/null
+++ b/src/lib/ImageTicker/index.svelte
@@ -0,0 +1,210 @@
+<script>
+  /*
+  Ticks through images with a dot indicator on top
+  Example: https://www.dropbox.com/s/clzcs8bwzm5lw3o/ImageTicker.mp4?dl=0
+  @props
+    fNames: array of objects with following properties:
+    [
+      {
+        path: 'path/to/file',
+        label: 'Label for the top of the ticker'
+      },
+      ...
+    ]
+    interval: number - the time between ticks in milliseconds
+    width: string - body-text|wide|wider|fluid
+    control: string - "autoplay" | "button"
+    labelPosition: "tl" | "tc" (default) | "tr" | "bl" | "bc" | "br" (t = top, b = bottom, r = right, l = left, c = centre)
+  */
+
+  export let fNames = [];
+  export let width = 'body-text';
+  export let interval = 1500;
+  export let control = 'autoplay';
+  export let labelPosition = 'tc';
+
+  import { onMount } from 'svelte';
+
+  let currentIndex = 0;
+  let start = Date.now();
+
+  // load next image
+  // direction: 1 = forward, -1 = backward
+  function tick(direction = 1) {
+    console.log('bleh');
+    if (direction === 1) currentIndex++;
+    else currentIndex--;
+
+    // go back to first image if reached the end of the array
+    currentIndex = currentIndex % fNames.length;
+    // go to last image if reached the beginning of the array
+    if (currentIndex === -1) currentIndex = fNames.length - 1;
+
+    // reset start time
+    start = Date.now();
+  }
+
+  function autoplay() {
+    const t = +Date.now() - start;
+    // check if interval has elapsed since last tick
+    if (t >= interval) {
+      tick();
+    }
+    requestAnimationFrame(autoplay);
+  }
+
+  // Call any extra, non-svelte JS after the component "mounts"
+  // so we're sure svelte is done doing its bit and
+  // we can then do whatever DOM manipulations we want.
+  onMount(() => {
+    if (control === 'autoplay') autoplay();
+  });
+</script>
+
+<section id="image-ticker-container" class="{width} mt-5 mb-5">
+  {#if labelPosition[0] === 't'}
+    <p id="image-ticker-label" class="label-{labelPosition[1]}">
+      {fNames[currentIndex].label}
+    </p>
+  {/if}
+
+  <div id="image-ticker-progress-dots" class="mb-2">
+    {#each fNames as image, index}
+      <div
+        class="progress-dot-{index === currentIndex ? 'active' : 'inactive'}"
+        id="progress-dot-{index}"
+      ></div>
+    {/each}
+  </div>
+  <div id="image-ticker-photo-container">
+    {#each fNames as image, index}
+      <img
+        class="image-ticker-{index === currentIndex ? 'active' : 'inactive'}"
+        id="image-ticker-{index}"
+        alt=""
+        src="{image.path}"
+      />
+    {/each}
+    {#if control === 'button'}
+      <div class="image-ticker-button-container">
+        <div
+          id="image-ticker-button-previous"
+          class="image-ticker-button"
+          on:click="{() => tick(-1)}"
+        >
+          <p>&lt;</p>
+        </div>
+        <div
+          id="image-ticker-button-next"
+          class="image-ticker-button"
+          on:click="{() => tick(1)}"
+        >
+          <p>&gt;</p>
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if labelPosition[0] === 'b'}
+    <p
+      id="image-ticker-label"
+      class="label-{labelPosition[1]} label-{labelPosition[0]}"
+    >
+      {fNames[currentIndex].label}
+    </p>
+  {/if}
+</section>
+
+<style type="text/scss">
+  #image-ticker-container {
+    #image-ticker-photo-container {
+      position: relative;
+      img {
+        width: 100%;
+        opacity: 1;
+        transition: opacity 0.5s ease-in-out;
+        &:not(#image-ticker-1) {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        &.image-ticker-inactive {
+          opacity: 0;
+        }
+      }
+
+      .image-ticker-button-container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        // buttons are light arrows on the image
+        .image-ticker-button {
+          height: 100%;
+          width: 50px;
+          top: 0;
+          position: absolute;
+          text-align: center;
+          font-size: 3rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+
+          p {
+            margin: 0;
+            pointer-events: none;
+          }
+
+          &#image-ticker-button-next {
+            right: 0;
+            background-image: linear-gradient(to left, #3a3a3a15, #3a3a3a00);
+          }
+
+          &#image-ticker-button-previous {
+            left: 0;
+            background-image: linear-gradient(to right, #3a3a3a15, #3a3a3a00);
+          }
+        }
+      }
+    }
+
+    #image-ticker-progress-dots {
+      width: 100%;
+      text-align: center;
+      > div {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+
+        margin: 0 5px;
+      }
+      .progress-dot-inactive {
+        border: 1px solid #3a3a3a;
+      }
+      .progress-dot-active {
+        border: none;
+        background-color: #3a3a3a;
+      }
+    }
+
+    #image-ticker-label {
+      font-size: 1.5rem;
+      font-weight: bold;
+      &.label-c {
+        text-align: center;
+      }
+      &.label-l {
+        text-align: left;
+      }
+      &.label-r {
+        text-align: right;
+      }
+      &.label-b {
+        margin-bottom: 0;
+        margin-top: 1.2rem;
+      }
+    }
+  }
+</style>
diff --git a/src/lib/index.js b/src/lib/index.js
index e94a653b..21646cd0 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -14,3 +14,4 @@ export { default as Hero } from './Hero/index.svelte';
 export { default as Ai2svelte } from './Ai2svelte/index.svelte';
 export { default as Scroller } from './Scroller/index.svelte';
 export { default as LottieScroller } from './LottieScroller/index.svelte';
+export { default as ImageTicker } from './ImageTicker/index.svelte';
diff --git a/src/statics/images/graphics/poyang-after.jpg b/src/statics/images/graphics/poyang-after.jpg
new file mode 100644
index 00000000..027426b6
Binary files /dev/null and b/src/statics/images/graphics/poyang-after.jpg differ
diff --git a/src/statics/images/graphics/poyang-before.jpg b/src/statics/images/graphics/poyang-before.jpg
new file mode 100644
index 00000000..7e0605b7
Binary files /dev/null and b/src/statics/images/graphics/poyang-before.jpg differ