ELEMENTS · REACT CAROUSEL

Today we will learn how to use the React Carousel element, which creates a sliding effect that allows us to display different elements in the form of slides, very useful for displaying text and images on the page.

To use it, we'll drag it from the element library into the body of our page.
When inserting the element, we can see that it offers different fields among which we have:

Classname: where the name of the element class will be placed, thus allowing styles and functionalities to be applied

Width: where we can control the width of the element, which by default is 550px.

Height: where we can control the height of the element, which by default is 500px.

We can also see that the element offers different types of switches, each with a particular function:

Autoplay: Will activate autoplay

Arrows Visible: It will allow us to make the arrows of the element always visible.

Remove Arrows: It will allow us to make the arrows disappear permanently.

Remove indicators: manages to eliminate the indicators.

ReactCarousel also provides some advanced properties, where we can find the following:

On change: this is a piece of code that will be executed when the state of the element changes.

Animation: is the animation style of the carousel. By default this value is in “fade”, but we can choose between this and “slide”.

And last but not least we can change the
Duration of the animations. By default this value is 500.

For this example we are going to use four images and a text, so we are going to drag all the elements that we need under the React Carousel element.

we configure the elements to our liking and then we save and build.


We save, build and verify that the element is working.
Finally I will show you the code, all generated automatically by Aptugo


. . .

Hoy aprenderemos a utilizar el elemento React Carousel, el cual crea un efecto deslizante que nos permite mostrar distintos elementos en forma de diapositivas, muy útil para mostrar textos e imágenes en la página.

Para utilizarlo, la arrastraremos desde la biblioteca de elementos hasta el body de nuestra página.

Al insertar el elemento y entrar en él, podemos ver que nos ofrece distintos campos del mismo, entre los cuales tenemos:

Classname: donde se colocará el nombre de la clase del elemento, permitiendo así aplicarle estilos y funcionalidades

Width: donde podremos controlar el ancho del elemento, el cual por defecto se encuentra en 550px.

Height: dónde podremos controlar la altura del elemento, la cual por defecto se encuentra en 500px.

También podemos ver que el elemento nos ofrece distintos tipos de switches cada uno con una particularidad:

Autoplay: Activará la reproducción automática

Arrows Visible: Nos permitirá lograr que las flechas del elemento sean siempre visibles.

Remove Arrows: nos permitirá lograr que las flechas desaparezcan permanentemente.

Remove indicators: logra eliminar los indicadores.

ReactCarousel también nos proporciona unas propiedades avanzadas, en donde podemos encontrar lo siguiente:

On change: el cual es un fragmento de código que se ejecutará cuando cambie el estado del elemento.

Animation: es el estilo de animación del carrusel. Por defecto este valor se encuentra en “fade”, pero podemos elegir entre este y “slide”.

y por ultimo Duration: donde podremos cambiar la duración de las animaciones. Por defecto este valor se encuentra en 500.

Para este ejemplo vamos a usar cuatro imagenes y un texto asi que vamos a arrastrar todos los elementos que necesitemos debajo del elemento React Carousel.

Configuramos los elementos a gusto para luego hacer save y build.

Finalmente les mostrare el codigo, generado automaticamente por Aptugo.

Hacemos save, build y verificamos que el elemento esta funcionando.
. . .

For more details, please visit: www.aptugo.com