rmolinamir / hero-slider Goto Github PK

A hero slider component. Includes autoplay, touch swiping, multiple navs, event callbacks, and more.

Home Page: https://rmolinamir.github.io/hero-slider/?path=/story/example-hero-slider--basic

JavaScript 3.35% HTML 0.87% CSS 10.82% TypeScript 84.18% MDX 0.78%

hero-slider's Introduction

I’m a Software Engineer proficient in both backend and frontend development, leveraging Domain-Driven Design (DDD) principles to foster collaboration among technical and business stakeholders.

TL;DR

💼 Over 5 years of experience programming professionally with different companies in multiple languages and technologies
📈 Staying current with the latest trends in various technologies, languages, and best programming practices
🌎 Open source collaborations and maintenance of various projects over the years
🎓 Mechanical engineer graduate since 2017, carried out a study of a model for the prediction of the properties of a welding cord for AISI/SAE steels
📄 Preview and download my resume here

More information

hero-slider's People

Contributors

Stargazers

Watchers

hero-slider's Issues

styled-components dependency

Nice Sliders!

Heads up, there's some bug around styled-components dependencies. I was getting this error until I manually installed styled-components

ERROR in ./node_modules/hero-slider/dist/index.es.js
Module not found: Error: Can't resolve 'styled-components' in
'/Users/<project-folder>/node_modules/hero-slider/dist'

Cheers,
Chris

export {default} from './HeroSlider.js';

SyntaxError: Unexpected token 'export'

I'm trying to build a hero section using the slider, but everytime iI import "HeroSlider" the page breaks with the following error:

full stacktrace:

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.hero-slider (/.next/server/pages/index.js:514:18)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42) {
  page: '/'
}

hero.tsx

import hero1 from "@images/hero-1.png";
import HeroSlider, { Slide } from "hero-slider";

const Hero = () => {
  return (
    <section id="home" className="relative m-0 flex  flex-col items-center ">
      <HeroSlider
        height={"50vh"}
        autoplay
        controller={{
          initialSlide: 1,
          slidingDuration: 500,
          slidingDelay: 100,
          onSliding: (nextSlide) =>
            console.debug("onSliding(nextSlide): ", nextSlide),
          onBeforeSliding: (previousSlide, nextSlide) =>
            console.debug(
              "onBeforeSliding(previousSlide, nextSlide): ",
              previousSlide,
              nextSlide
            ),
          onAfterSliding: (nextSlide) =>
            console.debug("onAfterSliding(nextSlide): ", nextSlide),
        }}
      >
        <Slide
          shouldRenderMask
          label="Giau Pass - Italy"
          background={{
            backgroundImageSrc: hero1.src,
          }}
        />

        <Slide
          shouldRenderMask
          label="Bogliasco - Italy"
          background={{
            backgroundImageSrc: hero1.src,
          }}
        />
      </HeroSlider>
    </section>
  );
};

export default Hero;

Set Aspect Ratio of heroslider

Not Working Properly on Nexjs 13 app router

Not Working Properly on Nexjs 13 app router:

It creates a fake slide 1 and hides it then counts from 2 when it reaches 1 it shows empty slate

hero-slider needs a refactor to make it agnostic of CSS libraries

Making the slider depend on styled-components is too opinionated and causes a few performance issues. Much of the logic needs to be abstracted from the slider as well, it is way too big of a component as of now.

How should I remove RESETTING when autoplaying ?

I need to add custom duration when a specific slide is entered. But it's resetting after I changed the autoplayDuration with stateChange.

How Can I fix this? Help me. This is my code.

import React, { Fragment, useEffect, useRef, useState } from "react";
import HeroSlider, { Slide } from "hero-slider";

import { useMediaQuery } from "react-responsive";
import { breakpoints } from "../../common/responsive";


const HeroSliderComponent = () => {
  const isMobile = useMediaQuery({
    query: breakpoints.mobile,
  });
  const defaultDuration = 4000;
  const [duration, setDuration] = useState(defaultDuration);
  const [currentSlide, setCurrentSlide] = useState(1);

  const videoRef = useRef();

  useEffect(() => {
    if (typeof videoRef.current !== "undefined") {
      if (currentSlide == 4) {
        videoRef.current.play();
        setDuration(videoRef.current.duration * 1000);
      } else {
        videoRef.current.pause();
        setDuration(defaultDuration);
      }
    }
  }, [currentSlide, videoRef.current]);

return (
<>
 <HeroSlider
        initialSlide={1}
        onAfterChange={(currentSlide) => {
          setCurrentSlide(currentSlide);
        }}
        style={{
          backgroundColor: "rgba(0, 0, 0, 0.33)",
        }}
        settings={{
          slidingDuration: 250,
          slidingDelay: 100,
          shouldAutoplay: true,
          shouldDisplayButtons: true,
          autoplayDuration: duration,
          height: isMobile ? "500px" : "600px",
        }}
      >
...
</HeroSlider>
</>
)

}

<MenuNav/> controls

How do I control the opacity or transparency of background

CSS breaking using Vite (react) + SWC

I don't know what seems to be the issue but the library is breaking (i.e the css of the package is not working) when using it with a new vite project. I literally copied the exmaple listed in the documentation and it's still breaking. Any help is appreciated.

These are my dependencies

"dependencies": {
    "@radix-ui/themes": "^2.0.3",
    "hamburger-react": "^2.5.0",
    "hero-slider": "^3.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "sass": "^1.69.5"
  }

"devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.6"
  }

Hero slider component

import HeroSlider, {Overlay, Slide, MenuNav} from "hero-slider";
import { Heading, Text } from "@radix-ui/themes";

//@: Styles
import styles from "./hero.module.scss";

//@: Assets
import hero_01 from "@/assets/images/hero/hero-1.jpg";
import hero_02 from "@/assets/images/hero/hero-2.jpg";
import hero_03 from "@/assets/images/hero/hero-3.jpg";
import hero_04 from "@/assets/images/hero/hero-4.jpg";

const listings = [
    {
        _id: 1,
        imageUrl: hero_01,
        location: "2nd Muthiaga - Nairobi",
        name: "Studio Apartment",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
    {
        _id: 2,
        imageUrl: hero_02,
        location: "Kilimani Road - Nairobi",
        name: "Lavington Apartments",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
    {
        _id: 3,
        imageUrl: hero_03,
        location: "Mogotio, Westlands - Nairobi",
        name: "Lavington Apartments",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
    {
        _id: 4,
        imageUrl: hero_04,
        location: "Kiambu Road - Nairobi",
        name: "Lavington Apartments",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
]

export default function Hero() {
    return (
        <HeroSlider
            autoplay
            controller={{
                initialSlide: 0,
                slidingDuration: 500,
                slidingDelay: 100,
                onSliding: (nextSlide) =>
                    console.log("onSliding(nextSlide): ", nextSlide),
                onBeforeSliding: (previousSlide, nextSlide) =>
                    console.log(
                        "onBeforeSliding(previousSlide, nextSlide): ",
                        previousSlide,
                        nextSlide
                    ),
                onAfterSliding: (nextSlide) =>
                    console.log("onAfterSliding(nextSlide): ", nextSlide)
            }}  
        >
            <Overlay>
                <div className={styles.hero}>
                    <div className={styles.hero__stack}>
                        <Heading as="h1" size="9">
                            Lavington Apartments
                        </Heading>
                        <Text as="p">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                            Dolore repellat quas dolor voluptatem magni inventore, in dicta. 
                            Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, 
                            adipisci ipsam repellendus molestias.
                        </Text>
                        
                    </div>
                </div>
            </Overlay>

            {listings.map(el => (
                <Slide
                    key={el._id}
                    shouldRenderMask
                    label={el.location}
                    background={{
                        backgroundImageSrc: el.imageUrl,
                    }}
                />
            ))}
            
            <MenuNav />
        </HeroSlider>
    )
}

useLayoutEffect warning on nextjs project

Hey!

Great job with the slider - very much like it!.
One issue is still bugging me though. The fact that useLayoutEffect is used in hero-slider/src/components/Slider/index.tsx file causes a lot of console log warnings.

Warning: useLayoutEffect does nothing on the server because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

There's a workaround for this, maybe you could implement this in? Thanks!

https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

rmolinamir / hero-slider Goto Github PK

hero-slider's Introduction

TL;DR

More information

hero-slider's People

Contributors

Stargazers

Watchers

Forkers

hero-slider's Issues

Recommend Projects

Recommend Topics

Recommend Org