Svelte Image Slider

randomstring.js

function randomstring(length) {
  length = length || 5
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < length; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

export default randomstring;

slider-css-tpl.js

div#slider {
  overflow: hidden;
  margin: auto;
  width: 50%;
}
div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: DURATION slider infinite;
}
div#slider div img {
  width: 20%;
  float: left;
}

svelete-slider.html

<div ref:slider style="width: {width}">
  {#each images as url}
  <div>
    <img src="{url}" alt="">
  </div>
  {/each}
</div>


<script>

  import randomstring from '../../services/randomstring.js';
import cssTemplate from './slider-css-tpl.js';
const ID = 'slider';
const DURATION = 'DURATION';
const head = document.head || document.getElementsByTagName('head')[0];

let old_id;

export default {
  onupdate({changed, current, previous}) {

    if (!current.images) return;

    const id = `slider-${randomstring()}`;
    this.refs.slider.id = id;
    this.refs.slider.style.width = current.width;

    let css = cssTemplate
      .replace(new RegExp(ID, 'g'), id)
      .replace(DURATION, `${current.total_duration}s`) +
      '\n' +
      this.generateKeyFramesCss(id, current.images.length);
    console.log(css);
    this.appendStyle(id, css);
    this.removeOldStyle();
    old_id = id;
  },
  data() {
    return {
      images: [],
      duration: 5,
      width: '100%'
    };
  },
  computed: {
    total_duration: ({duration, images}) => duration * images.length
  },
  methods: {
    appendStyle(id, css) {
      let style = document.createElement('style');
      style.type = 'text/css';
      style.id = 'style'+id;
      if (style.styleSheet){
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
      head.appendChild(style);
    },
    generateKeyFramesCss(name, num) {

      if (num <= 1) return '';

      let denomination = 100 / num;
      let d2 = denomination * (5/25);
      let kf = '@keyframes ' + name + '{\n';

      kf += '0%' + '{left: 0%;}\n'

      for (let i=1; i<=num; i++) {
        kf += ((i * denomination) - d2) + '%' + '{\n' +
          `left: ${-100*(i-1)}%;\n` +
          '}\n';

        if (i < num) {
          kf += (i * denomination) + '%' + '{\n' +
            `left: ${-100*i}%;\n` +
            '}\n';
        }
      }
      kf += '}\n';
      return kf;
    },
    removeOldStyle() {
      // Removes an element from the document
      var element = document.getElementById(`style${old_id}`);
      if (!element) return;
      element.parentNode.removeChild(element);
    }
  }
}

</script>