Tutorial Elementor Slider widget

Quiero cambiar tanto las flechas de los lados de un slider en Elementor como los puntos inferiores. Ya he conseguido con el siguiente video

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Aceptar cookies de terceros

hacer el cambio de las flechas de los lados del slider, pero no he podido saber como cambiar los iconos, el color o agrandar los que trae por defecto. El codigo que agregué el en "custom css" es el siguiente.

selector .eicon-chevron-left:before {
content:"";
display: block;
width: 50px;
height: 50px;
background: url(xxxxxxxx);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(180deg);
}

selector .eicon-chevron-right:before {
content:"";
display: block;
width: 50px;
height: 50px;
background: url(xxxxxxxx);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(180deg);
}

Alguien sabe como cambiar los puntos inferiores del slider?

 

[Karagnoz]

Puedes dejar el link de la pagina para probar con Inspeccionar elemento del navegador?

 

[chiripa]

Puedes dejar el link de la pagina para probar con Inspeccionar elemento del navegador?

www.ccdb.edu.co

 

[mianqui]

Quiero cambiar tanto las flechas de los lados de un slider en Elementor como los puntos inferiores. Ya he conseguido con el siguiente video

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Aceptar cookies de terceros

hacer el cambio de las flechas de los lados del slider, pero no he podido saber como cambiar los iconos, el color o agrandar los que trae por defecto. El codigo que agregué el en "custom css" es el siguiente.

selector .eicon-chevron-left:before {
content:"";
display: block;
width: 50px;
height: 50px;
background: url(xxxxxxxx);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(180deg);
}

selector .eicon-chevron-right:before {
content:"";
display: block;
width: 50px;
height: 50px;
background: url(xxxxxxxx);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(180deg);
}

Alguien sabe como cambiar los puntos inferiores del slider?

Hola,
La clase que esta envolviendo los puntos es .swiper-pagination-bullets con ese puede darle estilos, podría ayudar más si comentaras que diseño quieres llegar con los puntos, algún ejemplo en img o url para guiarnos. Saludos!

 

[Karagnoz]

Bueno encontré eso jeje

.swiper-pagination-bullet {
height: 10px;
width: 10px;
background-color: red;
}

.swiper-pagination-bullet-active {
height: 15px !important;
width: 15px !important;
background-color: blue !important;
}

Salu2!

www.ccdb.edu.co

 

[chiripa]

Bueno encontré eso jeje

.swiper-pagination-bullet {
height: 10px;
width: 10px;
background-color: red;
}

.swiper-pagination-bullet-active {
height: 15px !important;
width: 15px !important;
background-color: blue !important;
}

Salu2!

Muchas gracias Karagnoz por el código compartido. Solo le hice una modificación. No se si los administradores esten de acierdo con hacer un tema sobre codigo con el cual se solucionen problemas. Que opinan.

.swiper-pagination-bullet {
height: 20px !important;
width: 20px !important;
background-color: red;
}

.swiper-pagination-bullet-active {
height: 20px !important;
width: 20px !important;
background-color: blue !important;
}

 

[chiripa]

Hola,
La clase que esta envolviendo los puntos es .swiper-pagination-bullets con ese puede darle estilos, podría ayudar más si comentaras que diseño quieres llegar con los puntos, algún ejemplo en img o url para guiarnos. Saludos!

Gracias Mianqui por la respuesta.

La idea es que los puntos inferiores se puedan ver mas. No se que otros tipos de iconos se peudan poner. Inserté el siguiente código que nos comparte Karagnoz.

.swiper-pagination-bullet {
height: 20px!important;
width: 20px!important;
background-color: red;
}

.swiper-pagination-bullet-active {
height: 20px !important;
width: 20px !important;
background-color: blue !important;
}