Deslizador circular adaptable en Vanilla JavaScript-jCircle

Vista prévia

Descripción

jCircle es una biblioteca de JavaScript vainilla que le permite mostrar contenido HTML (texto o imágenes) en un deslizador circular de rotación automática con capacidad de respuesta, animado.

Funcionamiento

Importa el JavaScript y la hoja de estilos de jCircle en la página HTML.

<link href="jCircle.css" rel="stylesheet">
<script src="jCircle.min.js"></script>

Agregue su propio contenido al control deslizante circular.

<div id="circles-container">

<div id="main-circle-content"></div>

<div id="circle">


<div class="min-circle" data-inside="min-circle"> <a href="imgs/1.jpg"> <img src="imgs/thumb_1.jpg" alt=""> </a>



<div class="content-text">Caption 1</div>


</div>


<div class="min-circle" data-inside="min-circle"> <a href="imgs/2.jpg"> <img src="imgs/thumb_2.jpg" alt=""> </a>



<div class="content-text">Caption 2</div>


</div>


<div class="min-circle" data-inside="min-circle"> <a href="imgs/3.jpg"> <img src="imgs/thumb_3.jpg" alt=""> </a>



<div class="content-text">Caption 3</div>


</div>


...

</div>
</div>

Cree una nueva instancia de jCircle con la siguiente configuración:

var circle= new jCircle({


'container': 'circles-container',


'circle': 'circle',


'mainContent':'main-circle-content',


'animateCircles':true,


'speed':3,


'mainViewStyle':'normal',


'minCirclesEffectOver':'pulse',


'contentType':'images',


'stopOnOverMain':false,


'mainContentOverAction':'normal'
});

Inicialice el deslizador circular y listo.

circle.create();

Todas las opciones de configuración predeterminadas.

var circle= new jCircle({



// Contains All Content


container: 'circles-container',



// DIV That Contains Mini DIVs Circles


 circle: 'circle',



 // Center Big Circle


mainContent:'main-circle-content',



 // Class Name For Mini Circles DIVs


minCirclesClass: 'min-circle',



 // For Internal Use, Array Of Mini Circles DIVs


minCircles: [],



 // [normal | enlarge-view]


mainViewStyle: 'normal',



// Animates Mini Circles?


animateCircles: true,



 // Animation Type [rotateSelf]


animateType: 'rotateAround',



 // Animation Status [pause | play]


animateStatus: 'play',



// Animation Delay Time (speed) [Number Of Seconds]


speed: 3,



 // Stops Animation On Mouse Over [true | false]


stopOnOverMain: true,


 stopOnOverMini: true,



 // [pulse, zoomOutIn, flip, rotate]


minCirclesEffectOver: 'none',



 // [images | text]


contentType: 'images',



 // Enlarge Center Area On Mouse Over


 mainContentOverAction: 'normal'



});