npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-slider-gv

v1.0.0

Published

Desarrollado por Gastón Valentini

Downloads

3

Readme

react-slider-gv

Desarrollado por Gastón Valentini

Este paquete se trata de un componente versátil y fácil de usar que le permitirá agregar carruseles interactivos a sus aplicaciones web desarrolladas con React. Con este componente, puede crear presentaciones de diapositivas dinámicas y atractivas para mostrar contenido de manera efectiva a los usuarios.

Tabla de Contenidos

  1. Características
  2. Instalación
  3. Prop types y valores por defecto
  4. Contribución
  5. Desarrollador
  6. Licencia

Características

  • Personalizable: Ofrece una variedad de opciones de personalización como ajuste de dimensiones, efecto y velocidad de transición, diferentes formatos de navegación y más. Puedes adaptar el aspecto y la funcionalidad del carrusel para que se ajuste perfectamente a tus necesidades y estilo de diseño.

  • Fácil de usar: Con una interfaz simple y clara, la integración en sus proyectos es rápida y sencilla. Simplemente importe el componente en su aplicación y pase los elementos deseados como contenido.

  • Control de navegación: Incluye botones de navegación incorporados que permiten a los usuarios avanzar y retroceder entre las diapositivas con facilidad. Esto ofrece una experiencia de usuario intuitiva y mejorada.

Instalación

Para implementar esta librería simplemente debe seguir los siguientes pasos:

1º Instalación del paquete

Ubicado en la raíz del proyecto ejecute el siguiente comando:

npm install react-slider-gv

2º Importación

Importe el componente Slider y sus estilos en su proyecto:

import Slider from "react-slider-gv";
import "react-slider-gv/dist/style.css";

3º Implementación

Para utilizar la librería, implemente el componente en su aplicación y pase los elementos deseados como contenido:

export default function App() {
    return (
        <Slider>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
        </Slider>
    );
}

4º Personalización

Puede personalizar aún más el carrusel pasando configuraciones como props:

export default function App() {
    const settings = {
        // Se muestra el objeto de configuración como ejemplo con los valores por defecto
        height: "100%",
        width: "100%",
        smooth: false,
        smoothTime: "0.3",
        infiniteScroll: false,
        dots: false,
        arrows: true,
        autoplay: false,
        autoplayInterval: 3000,
        initialSlide: 0,
    };

    return (
        <Slider settings={settings}>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
        </Slider>
    );
}

Prop types y valores por defecto

En la siguiente tabla se muestra el tipo de dato y el valor por defecto de las propiedades del objeto de configuración:

| Prop | Tipo | Valor por Defecto | Descripción | | ------------------ | --------- | ----------------- | ------------------------------------------------------------------------------------------------ | | height | string | "100%" | Alto del carrusel | | width | string | "100%" | Ancho del carrusel | | smooth | boolean | false | Define si el carrusel tiene una transición suave | | smoothTime | string | "0.3s" | Duración de la transición en segundos (Debe ser menor o igual que la propiedad autoplayInterval) | | infiniteScroll | boolean | false | Define si el carrusel tiene scroll infinito | | dots | boolean | false | Define si el carrusel tendrá el navbar con puntos | | arrows | boolean | true | Define si el carrusel tendrá las flechas para navegar | | autoplay | boolean | false | Define si el carrusel cambiará automáticamente de diapositivas | | autoplayInterval | number | 3000 | Intervalo entre el cambio de las diapositivas (ms) (No se recomienda que sea inferior a 1000) | | initialSlide | number | 0 | Diapositiva inicial que se mostrará en el carrusel |

Contribución

¡Contribuciones son bienvenidas! Si tienes ideas para mejorar este proyecto o encuentras algún problema, por favor abre un pull request en GitHub.

  1. Haz un fork del proyecto.
  2. Crea una nueva rama (git checkout -b feature/nueva-funcionalidad).
  3. Realiza los cambios necesarios y realiza los commits (git commit -m 'Agrega nueva funcionalidad').
  4. Empuja tus cambios (git push origin feature/nueva-funcionalidad).
  5. Abre un pull request.

Desarrollador - Gastón Valentini

  • LinkedIn: https://www.linkedin.com/in/gastonvalentini/
  • GitHub: https://github.com/Gaston-Valentini
  • Portfolio: https://www.gastonvalentini.com/

Licencia

Este proyecto está licenciado bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

Volver al inicio