Estoy buscando ayuda para hacer un control deslizante de fondo al hacer clic. Pero hasta ahora no he encontrado ninguna ayuda. Esta es la sección html donde la clase con la sección 1 recibe el fondo:
<div className="section-1"> <div className="first-button"> <button>Enroll Now</button> </div> <i class="fa fa-angle-right scroll-button" onclick="plusSlide(-1)" aria-hidden="true"></i> <i class="fa fa-angle-right scroll-button-left" onclick="plusSlide(1)" aria-hidden="true"></i> </div>Y este es el CSS:
.section-1 { background-image: url(./assets/bg1.jpg); height: 75vh; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; }También trato de darle algo de javascript. Pero ese javascript solo es aplicable en el caso de una imagen simple. He hecho imágenes simples a través de bucle y algunas clases de css.
Aunque este es un tema de reactjs, lo intentaré usando la acción de desplazamiento y solo css.
.slider { padding: 25vh 0; width: 100%; background-color: red; position: relative; top: 6.25vh; text-align: center; transition: 0.2s; opacity: 0; } .slider:hover { opacity: 1; }Básicamente, lo que esto hace es diseñar nuestro párrafo para que sea un control deslizante con su texto en el medio, y en el momento en que pasemos el mouse sobre él, el control deslizante aparecerá con el texto. Puedes editar la transición y el efecto todo lo que quieras. La idea básica es esta.