Automatic Circular Slider In Vanilla JavaScript

Preview:

Description:

A fancy, responsive, vanilla JavaScript carousel (slider) plugin which automatically rotates through a group of images along a semicircle.

How to use it:

Add images & descriptions to the circular slider.

<div class="slider">
  <div class="circular-slider circular-slider-demo">
    <div class="wrapper">
      <div class="controls">
        <div class="controls__left">
          <div class="icon-wrapper"><i class="far fa-arrow-alt-circle-left"></i></div>
        </div>
        <div class="controls__right">
          <div class="icon-wrapper"><i class="far fa-arrow-alt-circle-right"></i></div>
        </div>
        <div class="controls__autoplay controls__autoplay_running">
          <div class="icon-wrapper">
            <div class="pause"><i class="far fa-pause-circle"></i></div>
            <div class="run"><i class="far fa-play-circle"></i></div>
          </div>
        </div>
      </div>
      <div class="slides-holder">
        <div class="slides-holder__item slides-holder__item_active"><img src="1.svg" alt="img"/></div>
        <div class="slides-holder__item"><img src="2.png" alt="img"/></div>
        <div class="slides-holder__item"><img src="3" alt="img"/></div>
        <div class="slides-holder__item"><img src="4.png" alt="img"/></div>
        <div class="slides-holder__item"><img src="5.png" alt="img"/></div>
        <div class="slides-holder__item"><img src="6.png" alt="img"/></div>
      </div>
      <div class="descriptions">
        <div class="descriptions__item descriptions__item_visible">
          <h1>Slide 1</h1>
          <p class="description">Desc 1</p>
        </div>
        <div class="descriptions__item">
          <<h1>Slide 2</h1>
          <p class="description">Desc 2</p>
        </div>
        <div class="descriptions__item">
          <h1>Slide 3</h1>
          <p class="description">Desc 3</p>
        </div>
        <div class="descriptions__item">
          <h1>Slide 4</h1>
          <p class="description">Desc 4</p>
        </div>
        <div class="descriptions__item">
          <h1>Slide 5</h1>
          <p class="description">Desc 1</p>
        </div>
        <div class="descriptions__item">
          <h1>Slide 6</h1>
          <p class="description">Desc 1</p>
        </div>
      </div>
    </div>
  </div>
</div>

Download and include the JavaScript file ‘circular-slider.js’ on the webpage.

<script src="js/circular-slider.js"></script>

The circular slider uses Font Awesome for the navigation controls.

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

The primary CSS for the circular slider. Add the following CSS snippets to your page and done.

.circular-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-color: #222;
}
.circular-slider .wrapper {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 20px 0px 20px;
  overflow: hidden;
}
.circular-slider .wrapper .controls__left, .circular-slider .wrapper .controls__right, .circular-slider .wrapper .controls__autoplay {
  position: absolute;
  z-index: 101;
  -webkit-transition: .6s all;
  -o-transition: .6s all;
  transition: .6s all;
}
.circular-slider .wrapper .controls__left:hover .icon-wrapper, .circular-slider .wrapper .controls__right:hover .icon-wrapper, .circular-slider .wrapper .controls__autoplay:hover .icon-wrapper {
  font-size: 1.7em;
  opacity: 1;
}
.circular-slider .wrapper .controls__left .icon-wrapper, .circular-slider .wrapper .controls__right .icon-wrapper, .circular-slider .wrapper .controls__autoplay .icon-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #8EB8E5;
  font-size: 1.5em;
  opacity: .7;
}
.circular-slider .wrapper .controls__left, .circular-slider .wrapper .controls__right { top: 50%; }
.circular-slider .wrapper .controls__left {
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.circular-slider .wrapper .controls__left:hover { left: 0; }
.circular-slider .wrapper .controls__right {
  right: 0;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.circular-slider .wrapper .controls__autoplay {
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.circular-slider .wrapper .controls__autoplay_running .pause { display: block; }
.circular-slider .wrapper .controls__autoplay_running .run { display: none; }
.circular-slider .wrapper .controls__autoplay_paused .pause { display: none; }
.circular-slider .wrapper .controls__autoplay_paused .run { display: block; }
.circular-slider .wrapper .slides-holder {
  border-radius: 50%;
  border: 2px solid #8EB8E5;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 100;
}
.circular-slider .wrapper .slides-holder__item {
  border-radius: 50%;
  border: 2px solid #7C99B4;
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  background-color: #222;
  -webkit-transition: .3s linear all;
  -o-transition: .3s linear all;
  transition: .3s linear all;
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
}
.circular-slider .wrapper .slides-holder__item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.circular-slider .wrapper .slides-holder__item_active {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}
.circular-slider .wrapper .descriptions {
  position: absolute;
  bottom: 0%;
  z-index: 0;
}
.circular-slider .wrapper .descriptions__item {
  width: 100%;
  height: 0%;
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: opacity 0s 0s linear;
  -o-transition: opacity 0s 0s linear;
  transition: opacity 0s 0s linear;
}
.circular-slider .wrapper .descriptions__item_visible {
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity .6s 0s linear;
  -o-transition: opacity .6s 0s linear;
  transition: opacity .6s 0s linear;
}
.circular-slider .wrapper .descriptions__item h1, .circular-slider .wrapper .descriptions__item .description {
  font-family: Helvetica, sans-serif;
  color: white;
  text-align: center;
}
.circular-slider .wrapper .descriptions__item h1 {
  font-size: 200%;
  padding-top: 5px;
}
.circular-slider .wrapper .descriptions__item .description {
  font-size: 100%;
  margin-top: 5px;
  padding: 0% 10%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow-y: hidden;
}