Do you have various options or products and want to show them in a beautiful way? This is a slideshow helps you do it. Just click on each label and see how slides go one by one to reach the selected slide. It has capacity to put eight slides. Another benefit of this slider is that it gets a small space. You don’t need to put it exactly in the middle of the page. It can be included in a sidebar or somewhere else. Enjoy!

HTML
<div class="slider-wrapper">
  <div class="rotatescroll" id="rotatescroll">
    <div class="viewport">
      <ul class="overview">
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-01.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-02.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-03.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-04.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-05.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-06.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-07.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://devanswer.com/codes/files/slider-08.jpg" alt="" /></a>
        </li>
      </ul>

    </div>
    <!-- /.viewport -->

    <div class="dot"></div>
    <div class="overlay overlay-interaction" id="overlayInteraction"></div>
    <div class="overlay overlay-static"></div>
    <div class="overlay overlay-active" id="overlayActive"></div>
    <div class="thumb"></div>

  </div>
  <!-- /.rotatescroll -->
</div>
<!-- /.slider-wrapper -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
CSS
*,
*:before,
*:after {
  /* outline: 1px dotted salmon; */
  
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  background-color: #303634;
}

body {
  font: 100%/1.5 AvenirNext-Medium, Corbel, "Segoe Ui", "Trebuchet Ms", sans-serif;
  margin: 0;
  box-sizing: border-box;
  min-height: 100%;
  overflow: hidden;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

.slider-wrapper {
  /* width: 390px; */
  
  max-width: 24.375em;
  margin: 2em auto 0;
}

.rotatescroll img {
  vertical-align: middle;
  border: 9px solid #26d9a0;
}

.rotatescroll img,
.rotatescroll .overview li {
  border-radius: 50%;
}
/* Tiny Circleslider */

.rotatescroll {
  position: relative;
  height: 390px;
  width: 390px;
  padding: 40px;
  overflow: hidden;
}

.rotatescroll .viewport {
  /* width: 390px; */
  
  height: 390px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  background-color: #26d9a0;
}

.rotatescroll .overview {
  /* position: absolute; */ 
  position: relative;
  width: 798px;
  list-style: none;
  left: 0;
  top: 0;
  margin: -20px 0 0 -20px;
  padding: 0;
  z-index: 0;
}

.rotatescroll .overview li {
  height: 342px;
  width: 342px;
  float: left;
  position: relative;
  padding: 15px;
  margin: 4px 0 0 4px;
}

.rotatescroll .overlay {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 390px;
  width: 390px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 390'%3E%3Cg%3E%3Cpath fill='rgb(48,54,52)' d='M195,0H0v195C0,87.305,87.305,0,195,0z'/%3E%3Cpath fill='rgb(48,54,52)' d='M195,390h195V195C390,302.696,302.695,390,195,390z'/%3E%3Cpath fill='rgb(48,54,52)' d='M0,195v195h195C87.305,390,0,302.696,0,195z'/%3E%3Cpath fill='rgb(48,54,52)' d='M195,0c107.695,0,195,87.305,195,195V0H195z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='rgb(64,191,151)' d='M195,0C87.304,0,0,87.305,0,195s87.304,195,195,195c107.695,0,195-87.305,195-195S302.695,0,195,0z M195,345c-82.926,0-150-67.074-150-150c0-82.925,67.074-150,150-150c82.926,0,150,67.075,150,150C345,277.926,277.926,345,195,345 z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='rgb(240,250,247)' d='M195,3C88.919,3,3,88.92,3,195s85.919,192,192,192c106.08,0,192-85.92,192-192S301.08,3,195,3z M195,345 c-82.926,0-150-67.074-150-150c0-82.925,67.074-150,150-150c82.926,0,150,67.075,150,150C345,277.926,277.926,345,195,345z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='rgb(38,217,160)' d='M195,43c-84.003,0-152,67.998-152,152c0,84.002,67.997,152,152,152c84.002,0,152-67.998,152-152 C347,110.998,279.002,43,195,43z M195,345c-82.926,0-150-67.074-150-150c0-82.925,67.074-150,150-150c82.926,0,150,67.075,150,150 C345,277.926,277.926,345,195,345z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='rgb(38,217,160)' d='M137.375,56.438C155.096,49.08,174.598,45,195,45s39.697,4.018,57.417,11.375l16.792-40.458 C246.524,6.489,221.106,1,195,1c-26.107,0-51.759,5.447-74.443,14.875L137.375,56.438z'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat; 
}

.rotatescroll .overlay-interaction {
   background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 390'%3E%3Cg%3E%3Cpath fill='rgb(185,255,153)' d='M137.375,56.438C155.096,49.08,174.598,45,195,45s39.697,4.018,57.417,11.375l16.792-40.458 C246.524,6.489,221.106,1,195,1c-26.107,0-51.759,5.447-74.443,14.875L137.375,56.438z'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
   z-index: 0;
}

.rotatescroll [class*="-hovered"] {
  z-index: 1;
}

.rotatescroll .slideno\(1\),
.is-slide2-hovered {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.rotatescroll .slideno\(2\),
.is-slide3-hovered {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.rotatescroll .slideno\(3\),
.is-slide4-hovered {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.rotatescroll .slideno\(4\),
.is-slide5-hovered {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.rotatescroll .slideno\(5\),
.is-slide6-hovered {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.rotatescroll .slideno\(6\),
.is-slide7-hovered {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.rotatescroll .slideno\(7\),
.is-slide8-hovered {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}

.rotatescroll .thumb {
  touch-action: none;
  -ms-touch-action: none;
  position: absolute;
  top: -3px;
  cursor: pointer;
  /* left: 137px; */ 
  left: 200px;
  width: 24px;
  height: 24px;
  z-index: 200;
  background: #fff;
  border: 2px solid #40bf97;
  border-radius: 50%;
}

.rotatescroll .dot {
  left: inherit !important;
  top: 0 !important;
  z-index: 100;
  text-align: center;
  overflow: hidden;
  position: absolute;
  /* top: 0; */
  
  right: 0;
  width: 50%;
  height: 50%;
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}

.rotatescroll .dot span {
  /* display: none; */
}

.rotatescroll .dot:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  border-left: 2px solid #40b590;
  height: 42px;
  /* display: table-cell; */
}

.rotatescroll .text {
  padding-top: 20px;
}

.rotatescroll .flip.text {
  padding-top: 30px;
}

.rotatescroll .flip.text span {
  top: 5px;
}

.rotatescroll .active .flip.text span {
  top: 18px !important;
}

.rotatescroll .active h1 div.text {
  /* background-color: #26d9a0; */ 
  color: #fff;
  padding: 20px;
  height: 8px !important;
  text-shadow: 0 0 1px #303634,2px 1px 1px hsla(160, 6%, 20%,.5);
  font-family: AvenirNext-DemiBold, Corbel, "Segoe Ui", "Trebuchet Ms", sans-serif;
}

.rotatescroll .active h1 div.text:hover {
  color: #303634;
  text-shadow: none;
} 

.rotatescroll h1 span {
  line-height: 0.65;
  white-space: pre;
  overflow: visible;
  padding: 0px;
}

.rotatescroll .flip {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg)
}

.rotatescroll .active {}

.rotatescroll .dot h1 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  -webkit-transform: skewY(45deg) rotate(22.5deg);
          transform: skewY(45deg) rotate(22.5deg);
  margin: 0;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  line-height: 0;
  font-weight: bold;
  text-transform: uppercase;
  color: #303634; 
}

.rotatescroll .dot-1 {
  -webkit-transform: rotate(337.5deg) skewY(-45deg);
          transform: rotate(337.5deg) skewY(-45deg);
}

.rotatescroll .dot-2 {
  -webkit-transform: rotate(22.5deg) skewY(-45deg);
          transform: rotate(22.5deg) skewY(-45deg);
}

.rotatescroll .dot-3 {
  -webkit-transform: rotate(67.5deg) skewY(-45deg);
          transform: rotate(67.5deg) skewY(-45deg);
}

.rotatescroll .dot-4 {
  -webkit-transform: rotate(112.5deg) skewY(-45deg);
          transform: rotate(112.5deg) skewY(-45deg);
}

.rotatescroll .dot-5 {
  -webkit-transform: rotate(157.5deg) skewY(-45deg);
          transform: rotate(157.5deg) skewY(-45deg);
}

.rotatescroll .dot-6 {
  -webkit-transform: rotate(202.5deg) skewY(-45deg);
          transform: rotate(202.5deg) skewY(-45deg);
}

.rotatescroll .dot-7 {
  -webkit-transform: rotate(247.5deg) skewY(-45deg);
          transform: rotate(247.5deg) skewY(-45deg);
}

.rotatescroll .dot-8 {
  -webkit-transform: rotate(292.5deg) skewY(-45deg);
          transform: rotate(292.5deg) skewY(-45deg);
}
Javascript
// Avoid `console` errors in browsers that lack a console.
(function() {
  var method;
  var noop = function() {};
  var methods = [
    'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
    'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
    'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
    'timeStamp', 'trace', 'warn'
  ];
  var length = methods.length;
  var console = (window.console = window.console || {});

  while (length--) {
    method = methods[length];

    // Only stub undefined methods.
    if (!console[method]) {
      console[method] = noop;
    }
  }
}());

// Place any jQuery/helper plugins in here.

/*global jQuery */
/*!
 * Lettering.JS 0.6.1
 *
 * Copyright 2010, Dave Rupert http://daverupert.com
 * Released under the WTFPL license
 * http://sam.zoy.org/wtfpl/
 *
 * Thanks to Paul Irish - http://paulirish.com - for the feedback.
 *
 * Date: Mon Sep 20 17:14:00 2010 -0600
 */
(function($) {
  function injector(t, splitter, klass, after) {
    var text = t.text(),
      a = text.split(splitter),
      inject = '';
    if (a.length) {
      $(a).each(function(i, item) {
        inject += '<span class="' + klass + (i + 1) + '" aria-hidden="true">' + item + '</span>' + after;
      });
      t.attr('aria-label', text)
        .empty()
        .append(inject)

    }
  }

  var methods = {
    init: function() {

      return this.each(function() {
        injector($(this), '', 'char', '');
      });

    },

    words: function() {

      return this.each(function() {
        injector($(this), ' ', 'word', ' ');
      });

    },

    lines: function() {

      return this.each(function() {
        var r = "eefec303079ad17405c889e092e105b0";
        // Because it's hard to split a <br/> tag consistently across browsers,
        // (*ahem* IE *ahem*), we replace all <br/> instances with an md5 hash
        // (of the word "split").  If you're trying to use this plugin on that
        // md5 hash string, it will fail because you're being ridiculous.
        injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
      });

    }
  };

  $.fn.lettering = function(method) {
    // Method calling logic
    if (method && methods[method]) {
      return methods[method].apply(this, [].slice.call(arguments, 1));
    } else if (method === 'letters' || !method) {
      return methods.init.apply(this, [].slice.call(arguments, 0)); // always pass an array
    }
    $.error('Method ' + method + ' does not exist on jQuery.lettering');
    return this;
  };

})(jQuery);

/*global jQuery */
/*!
 * FitText.js 1.1
 *
 * Copyright 2011, Dave Rupert http://daverupert.com
 * Released under the WTFPL license
 * http://sam.zoy.org/wtfpl/
 *
 * Date: Thu May 05 14:23:00 2011 -0600
 */

(function($) {

  $.fn.fitText = function(kompressor, options) {

    // Setup options
    var compressor = kompressor || 1,
      settings = $.extend({
        'minFontSize': Number.NEGATIVE_INFINITY,
        'maxFontSize': Number.POSITIVE_INFINITY
      }, options);

    return this.each(function() {

      // Store the object
      var $this = $(this);

      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function() {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize', resizer);

    });

  };

})(jQuery);
/*
 * CircleType 0.36
 * Peter Hrynkow
 * Copyright 2014, Licensed GPL & MIT
 *
 */

$.fn.circleType = function(options) {

  var self = this,
    settings = {
      dir: 1,
      position: 'relative',
    };
  if (typeof($.fn.lettering) !== 'function') {
    console.log('Lettering.js is required');
    return;
  }
  return this.each(function() {

    if (options) {
      $.extend(settings, options);
    }
    var elem = this,
      delta = (180 / Math.PI),
      fs = parseInt($(elem).css('font-size'), 10),
      ch = parseInt($(elem).css('line-height'), 10) || fs,
      txt = elem.innerHTML.replace(/^\s+|\s+$/g, '').replace(/\s/g, ' '),
      letters,
      center;

    elem.innerHTML = txt
    $(elem).lettering();

    elem.style.position = settings.position;

    letters = elem.getElementsByTagName('span');
    center = Math.floor(letters.length / 2)

    var layout = function() {
      var tw = 0,
        i,
        offset = 0,
        minRadius,
        origin,
        innerRadius,
        l, style, r, transform;

      for (i = 0; i < letters.length; i++) {
        tw += letters[i].offsetWidth;
      }
      minRadius = (tw / Math.PI) / 2 + ch;

      if (settings.fluid && !settings.fitText) {
        settings.radius = Math.max(elem.offsetWidth / 2, minRadius);
      } else if (!settings.radius) {
        settings.radius = minRadius;
      }

      if (settings.dir === -1) {
        origin = 'center ' + (-settings.radius + ch) / fs + 'em';
      } else {
        origin = 'center ' + settings.radius / fs + 'em';
      }

      innerRadius = settings.radius - ch;

      for (i = 0; i < letters.length; i++) {
        l = letters[i];
        offset += l.offsetWidth / 2 / innerRadius * delta;
        l.rot = offset;
        offset += l.offsetWidth / 2 / innerRadius * delta;
      }
      for (i = 0; i < letters.length; i++) {
        l = letters[i]
        style = l.style
        r = (-offset * settings.dir / 2) + l.rot * settings.dir
        transform = 'rotate(' + r + 'deg)';

        style.position = 'absolute';
        style.left = '50%';
        style.marginLeft = -(l.offsetWidth / 2) / fs + 'em';

        style.webkitTransform = transform;
        style.MozTransform = transform;
        style.OTransform = transform;
        style.msTransform = transform;
        style.transform = transform;

        style.webkitTransformOrigin = origin;
        style.MozTransformOrigin = origin;
        style.OTransformOrigin = origin;
        style.msTransformOrigin = origin;
        style.transformOrigin = origin;
        if (settings.dir === -1) {
          style.bottom = 0;
        }
      }

      if (settings.fitText) {
        if (typeof($.fn.fitText) !== 'function') {
          console.log('FitText.js is required when using the fitText option');
        } else {
          $(elem).fitText();
          $(window).resize(function() {
            updateHeight();
          });
        }
      }
      updateHeight();

      if (typeof settings.callback === 'function') {
        // Execute our callback with the element we transformed as `this`
        settings.callback.apply(elem);
      }
    };

    var getBounds = function(elem) {
      var docElem = document.documentElement,
        box = elem.getBoundingClientRect();
      return {
        top: box.top + window.pageYOffset - docElem.clientTop,
        left: box.left + window.pageXOffset - docElem.clientLeft,
        height: box.height
      };
    };

    var updateHeight = function() {
      var mid = getBounds(letters[center]),
        first = getBounds(letters[0]),
        h;
      if (mid.top < first.top) {
        h = first.top - mid.top + first.height;
      } else {
        h = mid.top - first.top + first.height;
      }
      elem.style.height = h + 'px';
    }

    if (settings.fluid && !settings.fitText) {
      $(window).resize(function() {
        layout();
      });
    }

    if (document.readyState !== "complete") {
      elem.style.visibility = 'hidden';
      $(window).load(function() {
        elem.style.visibility = 'visible';
        layout();
      });
    } else {
      layout();
    }
  });
};;
(function(factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof exports === 'object') {
      module.exports = factory(require("jquery"));
    } else {
      factory(jQuery);
    }
  }
  (function($) {
    var pluginName = "tinycircleslider",
      defaults = {
        interval: false,
        intervalTime: 3500,
        dotsSnap: false,
        dotsHide: true,
        radius: 140,
        start: 0,
        slides: []
      };

    function Plugin($container, options) {
      /**
       * The options of the carousel extend with the defaults.
       *
       * @property options
       * @type Object
       * @default defaults
       */
      this.options = $.extend({}, defaults, options);

      /**
       * @property _defaults
       * @type Object
       * @private
       * @default defaults
       */
      this._defaults = defaults;

      /**
       * @property _name
       * @type String
       * @private
       * @final
       * @default 'tinycircleslider'
       */
      this._name = pluginName;

      var self = this,
        $viewport = $container.find(".viewport"),
        $overview = $container.find(".overview"),
        $slides = $overview.children(),
        $thumb = $container.find(".thumb"),
        $dots = $container.find(".dot"),
        $links = $slides.find("a")

      , containerSize = {
        width: $container.outerWidth(true),
        height: $container.outerHeight(true)
      }, slideSize = {
        width: $slides.first().outerWidth(true),
        height: $slides.first().outerHeight(true)
      }, thumbSize = {
        width: $thumb.outerWidth(true),
        height: $thumb.outerHeight(true)
      }, dotSize = {
        width: $dots.outerWidth(),
        height: $dots.outerHeight()
      }

      , intervalTimer = null, animationTimer = null, touchEvents = 'ontouchstart' in window, isTouchEvent = false, hasRequestAnimationFrame = 'requestAnimationFrame' in window;

      /**
       * When dotsSnap is enabled every slide has a corresponding dot.
       *
       * @property dots
       * @type Array
       * @default []
       */
      this.dots = [];

      /**
       * The index of the current slide.
       *
       * @property slideCurrent
       * @type Number
       * @default 0
       */
      this.slideCurrent = 0;

      /**
       * The current angle in degrees
       *
       * @property angleCurrent
       * @type Number
       * @default 0
       */
      this.angleCurrent = 0;

      /**
       * The number of slides the slider is currently aware of.
       *
       * @property slidesTotal
       * @type Number
       * @default 0
       */
      this.slidesTotal = $slides.length;

      /**
       * If the interval is running the value will be true.
       *
       * @property intervalActive
       * @type Boolean
       * @default false
       */
      this.intervalActive = false;

      /**
       * @method _initialize
       * @private
       */
      function _initialize() {
        _setDots();

        $overview
          .append($slides.first().clone())
          .css("width", slideSize.width * ($slides.length + 1));

        _setEvents();

        _setCSS(0);
        self.move(self.options.start, self.options.interval);

        return self;
      }

      /**
       * @method _setEvents
       * @private
       */
      function _setEvents() {
        if (touchEvents) {
          $container[0].ontouchstart = _startDrag;
          $container[0].ontouchmove = _drag;
          $container[0].ontouchend = _endDrag;
        }

        $thumb.bind("mousedown", _startDrag);

        var snapHandler = function(event) {
          event.preventDefault();
          event.stopImmediatePropagation();

          self.stop();
          self.move($(this).attr("data-slide-index"));

          return false;
        };

        if (touchEvents) {
          $container.delegate(".dot", "touchstart", snapHandler);
        }
        $container.delegate(".dot", "mousedown", snapHandler);
      }

      /**
       * @method _setTimer
       * @private
       */
      function _setTimer(slideFirst) {
        intervalTimer = setTimeout(function() {
          self.move(self.slideCurrent + 1, true);
        }, (slideFirst ? 50 : self.options.intervalTime));
      }

      /**
       * @method _toRadians
       * @private
       * @param {Number} [degrees]
       */
      function _toRadians(degrees) {
        return degrees * (Math.PI / 180);
      }

      /**
       * @method _toDegrees
       * @private
       * @param {Number} [radians]
       */
      function _toDegrees(radians) {
        return radians * 180 / Math.PI;
      }

      /**
       * @method _setDots
       * @private
       */
      function _setDots() {
        var docFragment = document.createDocumentFragment();

        $dots.remove();

        $slides.each(function(index, slide) {
          var $dotClone = null,
            angle = parseInt($(slide).attr("data-degrees"), 10) || (index * 360 / self.slidesTotal),
            position = {
              top: -Math.cos(_toRadians(angle)) * self.options.radius + containerSize.height / 2 - dotSize.height / 2,
              left: Math.sin(_toRadians(angle)) * self.options.radius + containerSize.width / 2 - dotSize.width / 2
            };

          if ($dots.length > 0) {
            $dotClone = $dots.clone();
            $dotClone
              .addClass($(slide).attr("data-classname"))
              .css(position);

            docFragment.appendChild($dotClone[0]);
          }

          self.dots.push({
            "angle": angle,
            "slide": slide,
            "dot": $dotClone
          });
        });

        self.dots.sort(function(dotA, dotB) {
          return dotA.angle - dotB.angle;
        });

        $.each(self.dots, function(index, dot) {
          // custom
          if ($(dot.dot).length > 0) {
            if (index === 4) {
              $(dot.dot)
                .addClass("dot-" + (index + 1))
                .attr('data-slide-index', index)
                .html("<h1><div class='flip text'>" + options.slides[index] + "</div><div class='flip-curve curve'> </div></h1>");
            } else {
              $(dot.dot)
                .addClass("dot-" + (index + 1))
                .attr('data-slide-index', index)
                .html("<h1><div class='text'>" + options.slides[index] + "</div></h1>");
            }
          }

        });

        $container.append(docFragment);
        // custom
        $('h1').each(function(i, text) {
          if ($(this).find('div').html() === "Norway") {
            $(this).find('div.text').circleType({
              radius: 220,
              dir: -1
            });
          } else {
            $(this).find('div.text').circleType({
              radius: 220
            });
          }
        });

        $dots = $container.find(".dot");
      }

      /**
       * If the interval is stopped start it.
       *
       * @method start
       * @chainable
       */
      this.start = function(first) {
        if (self.options.interval) {
          self.intervalActive = true;

          _setTimer(first);
        }
        return self;
      };

      /**
       * If the interval is running stop it.
       *
       * @method stop
       * @chainable
       */
      this.stop = function() {
        self.intervalActive = false;

        clearTimeout(intervalTimer);

        return self;
      };

      /**
       * @method _findShortestPath
       * @private
       * @param {Number} [angleA]
       * @param {Number} [angleB]
       */
      function _findShortestPath(angleA, angleB) {
        var angleCW, angleCCW, angleShortest;

        if (angleA > angleB) {
          angleCW = angleA - angleB;
          angleCCW = -(angleB + 360 - angleA);
        } else {
          angleCW = angleA + 360 - angleB;
          angleCCW = -(angleB - angleA);
        }

        angleShortest = angleCW < Math.abs(angleCCW) ? angleCW : angleCCW;

        return [angleShortest, angleCCW, angleCW];
      }

      /**
       * @method _findClosestSlide
       * @private
       * @param {Number} [angle]
       */
      function _findClosestSlide(angle) {
        var closestDotAngleToAngleCCW = 9999,
          closestDotAngleToAngleCW = 9999,
          closestDotAngleToAngle = 9999,
          closestSlideCCW = 0,
          closestSlideCW = 0,
          closestSlide = 0;

        $.each(self.dots, function(index, dot) {
          var delta = _findShortestPath(dot.angle, angle);

          if (Math.abs(delta[0]) < Math.abs(closestDotAngleToAngle)) {
            closestDotAngleToAngle = delta[0];
            closestSlide = index;
          }

          if (Math.abs(delta[1]) < Math.abs(closestDotAngleToAngleCCW)) {
            closestDotAngleToAngleCCW = delta[1];
            closestSlideCCW = index;
          }

          if (Math.abs(delta[2]) < Math.abs(closestDotAngleToAngleCW)) {
            closestDotAngleToAngleCW = delta[2];
            closestSlideCW = index;
          }
        });

        return [
          [closestSlide, closestSlideCCW, closestSlideCW],
          [closestDotAngleToAngle, closestDotAngleToAngleCCW, closestDotAngleToAngleCW]
        ];
      }

      /**
       * Move to a specific slide.
       *
       * @method move
       * @chainable
       * @param {Number} [index] The slide to move to.
       */
      this.move = function(index) {
        var slideIndex = Math.max(0, isNaN(index) ? self.slideCurrent : index);

        if (slideIndex >= self.slidesTotal) {
          slideIndex = 0;
        }

        var angleDestination = self.dots[slideIndex] && self.dots[slideIndex].angle,
          angleDelta = _findShortestPath(angleDestination, self.angleCurrent)[0],
          angleStep = angleDelta > 0 ? -2 : 2;

        self.slideCurrent = slideIndex;
        _stepMove(angleStep, angleDelta, 50);

        self.start();

        return self;
      };

      /**
       * @method _sanitizeAngle
       * @private
       * @param {Number} [degrees]
       */
      function _sanitizeAngle(degrees) {
        return (degrees < 0) ? 360 + (degrees % -360) : degrees % 360;
      }

      /**
       * @method _stepMove
       * @private
       * @param {Number} [angleStep]
       * @param {Number} [angleDelta]
       * @param {Boolean} [stepInterval]
       */
      function _stepMove(angleStep, angleDelta, stepInterval) {
        var angleStepNew = angleStep,
          endAnimation = false;

        if (Math.abs(angleStep) > Math.abs(angleDelta)) {
          angleStepNew = -angleDelta;
          endAnimation = true;
        } else if (hasRequestAnimationFrame) {
          requestAnimationFrame(function() {
            _stepMove(angleStepNew, angleDelta + angleStep);
          });
        } else {
          animationTimer = setTimeout(function() {
            _stepMove(angleStepNew, angleDelta + angleStep, stepInterval * 0.9);
          }, stepInterval);
        }

        self.angleCurrent = _sanitizeAngle(self.angleCurrent - angleStepNew);

        _setCSS(self.angleCurrent, endAnimation);
      }

      /**
       * @method _page
       * @private
       * @param {Object} [event]
       */
      function _page(event) {
        return {
          x: isTouchEvent ? event.targetTouches[0].pageX : (event.pageX || event.clientX),
          y: isTouchEvent ? event.targetTouches[0].pageY : (event.pageY || event.clientY)
        };
      }

      /**
       * @method _drag
       * @private
       * @param {Object} [event]
       */
      function _drag(event) {
        var containerOffset = $container.offset(),
          thumbPositionNew = {
            left: _page(event).x - containerOffset.left - (containerSize.width / 2),
            top: _page(event).y - containerOffset.top - (containerSize.height / 2)
          };

        self.angleCurrent = _sanitizeAngle(
          _toDegrees(
            Math.atan2(thumbPositionNew.left, -thumbPositionNew.top)
          )
        );

        if (!hasRequestAnimationFrame) {
          _setCSS(self.angleCurrent);
        }

        return false;
      }

      /**
       * @method _setCSS
       * @private
       * @param {Number} [angle]
       * @param {Function} [fireCallback]
       */
      function _setCSS(angle, fireCallback) {
        closestSlidesAndAngles = _findClosestSlide(angle);
        closestSlides = closestSlidesAndAngles[0];
        closestAngles = closestSlidesAndAngles[1];

        $overview.css("left", -(closestSlides[1] * slideSize.width + Math.abs(closestAngles[1]) * slideSize.width / (Math.abs(closestAngles[1]) + Math.abs(closestAngles[2]))));
        $thumb.css({
          top: -Math.cos(_toRadians(angle)) * self.options.radius + (containerSize.height / 2 - thumbSize.height / 2),
          left: Math.sin(_toRadians(angle)) * self.options.radius + (containerSize.width / 2 - thumbSize.width / 2)
        });

        if (fireCallback) {
          /**
           * The move event will trigger when the carousel slides to a new slide.
           *
           * @event move
           * custom
           */
          $container.trigger("move", [$slides[self.slideCurrent], self.slideCurrent]);
          var slideno = _findClosestSlide(self.angleCurrent)[0][0];
          $('.dot').removeClass('active');
          $('.dot:eq(' + slideno + ')').addClass('active');
          $('#overlayActive').removeClass('slideno(0) slideno(1) slideno(2) slideno(3) slideno(4) slideno(5) slideno(6) slideno(7)').addClass('slideno(' + slideno + ')');
          
             $('.dot-1').mouseover(function() {
               $('#overlayInteraction').addClass('is-slide1-hovered');
             });
             $('.dot-1').mouseout(function() {
               $('#overlayInteraction').removeClass('is-slide1-hovered');
             });

             $('.dot-2').mouseover(function() {
               $('#overlayInteraction').addClass('is-slide2-hovered');
             });
             $('.dot-2').mouseout(function() {
               $('#overlayInteraction').removeClass('is-slide2-hovered');
             });

             $('.dot-3').mouseover(function() {
               $('#overlayInteraction').addClass('is-slide3-hovered');
             });
             $('.dot-3').mouseout(function() {
               $('#overlayInteraction').removeClass('is-slide3-hovered');
             });

             $('.dot-4').mouseover(function() {
              $('#overlayInteraction').addClass('is-slide4-hovered');
             });
             $('.dot-4').mouseout(function() {
              $('#overlayInteraction').removeClass('is-slide4-hovered');
             });

             $('.dot-5').mouseover(function() {
              $('#overlayInteraction').addClass('is-slide5-hovered');
             });
             $('.dot-5').mouseout(function() {
              $('#overlayInteraction').removeClass('is-slide5-hovered');
             });

             $('.dot-6').mouseover(function() {
              $('#overlayInteraction').addClass('is-slide6-hovered');
             });
             $('.dot-6').mouseout(function() {
              $('#overlayInteraction').removeClass('is-slide6-hovered');
             });

             $('.dot-7').mouseover(function() {
              $('#overlayInteraction').addClass('is-slide7-hovered');
             });
             $('.dot-7').mouseout(function() {
              $('#overlayInteraction').removeClass('is-slide7-hovered');
             });

             $('.dot-8').mouseover(function() {
              $('#overlayInteraction').addClass('is-slide8-hovered');
             });
             $('.dot-8').mouseout(function() {
              $('#overlayInteraction').removeClass('is-slide8-hovered');
             });           
          
        }
      }

      /**
       * @method _endDrag
       * @private
       * @param {Object} [event]
       */
      function _endDrag(event) {
        if ($(event.target).hasClass("dot")) {
          return false;
        }
        self.dragging = false;
        event.preventDefault();

        $(document).unbind("mousemove mouseup");
        $thumb.unbind("mouseup");

        if (self.options.dotsHide) {
          $dots.stop(true, true).fadeOut("slow");
        }

        if (self.options.dotsSnap) {
          self.move(_findClosestSlide(self.angleCurrent)[0][0]);
        }
      }

      function _dragAnimationLoop() {
        if (self.dragging) {
          _setCSS(self.angleCurrent);
          requestAnimationFrame(function() {
            _dragAnimationLoop();
          });
        }
      }

      /**
       * @method _startDrag
       * @private
       * @param {Object} [event]
       */
      function _startDrag(event) {
        event.preventDefault();
        isTouchEvent = event.type == 'touchstart';
        self.dragging = true;

        if ($(event.target).hasClass("dot")) {
          return false;
        }

        self.stop();

        $(document).mousemove(_drag);
        $(document).mouseup(_endDrag);
        $thumb.mouseup(_endDrag);

        if (self.options.dotsHide) {
          $dots.stop(true, true).fadeIn("slow");
        }

        if (hasRequestAnimationFrame) {
          _dragAnimationLoop();
        }
      }

      return _initialize();
    }

    /**
     * @class tinycircleslider
     * @constructor
     * @param {Object} options
     @param {Boolean} [options.dotsSnap=false] Shows dots when user starts dragging and snap to them.
     @param {Boolean} [options.dotsHide=true] Fades out the dots when user stops dragging.
     @param {Number}  [options.radius=140] Used to determine the size of the circleslider.
     @param {Boolean} [options.interval=false] Move to another block on intervals.
     @param {Number}  [options.intervalTime=intervalTime] Interval time in milliseconds.
     @param {Number}  [options.start=0] The slide to start with.
     */
    $.fn[pluginName] = function(options) {
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          $.data(this, "plugin_" + pluginName, new Plugin($(this), options));
        }
      });
    };
  }));
$(document).ready(function() {
  var widthtoacquire = $(window).width() - 30;
  var radius = (widthtoacquire - 80) / 2 > 150 ? 150 : (widthtoacquire - 80) / 2;

  $("#rotatescroll").tinycircleslider({
    dotsSnap: true,
    radius: radius,
    dotsHide: false,
    slides: ["England", "Ireland", "Wales", "Guernsey", "Norway", "Netherlands", "Belgium", "Italy"],
    interval: false
  });

});