Deslizador circular automático en Vanilla JavaScript

Vista prévia

Descripción

Un complemento de carrusel (Slider) de JavaScript elegante, receptivo y con capacidad de respuesta que rota automáticamente a través de un grupo de imágenes a lo largo de un semicírciro.

Funcionamiento

Añada imágenes & descripciones al deslizador circular.

<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>

Descargue e incluya el archivo JavaScript ' circular-Slider. js ' en la Página Web.

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

El deslizador circular utiliza Font awesome para los controles de navegación.

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

El CSS principal para el deslizador circular. Agregue los siguientes fragmentos de código CSS a su página y listo.

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