Automatic Circular Rotating Slider In Vanilla JavaScript

Circular-slider is a fancy and responsive JavaScript plugin that automatically rotates through a set of images along a semicircle. You can add more than one slider on the same page.

circular rotating slider jquery, circular slider javascript, how to create round slider in html, circular carousel

How to make use of it:

1. Add images and descriptions to the carousel 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>

2. Download and embed the ‘circular-slider.js‘ javascript file on the webpage.

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

3. Uses Font Awesome circular scroll bar for navigation controls.

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

4. Basic CSS for carousel scrollbar. Add the following CSS snippets to your page.

.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;
}

automatic circular slider Plugin/Github