Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-09-07 23:13:55 +05:00
Code Issues Projects Releases Packages Wiki Activity

feat: add slides snap by click

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-24 20:43:14 +05:00
parent 814b43498b
commit 073abf5ca6
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/Section/Photos.tsx
View file

@ -21,7 +21,7 @@ const links = [
}, },
]; ];
const OPTIONS: EmblaOptionsType = { dragFree: true, loop: true }; const OPTIONS: EmblaOptionsType = { loop: true};
const SLIDES = [ const SLIDES = [
"/images/photos/2024-06-14T19_32_04_024.JPG", "/images/photos/2024-06-14T19_32_04_024.JPG",
"/images/photos/2024-06-17T18_55_55_030.JPG", "/images/photos/2024-06-17T18_55_55_030.JPG",

14
app/components/Photos.Carousel.tsx
View file

@ -90,18 +90,24 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
<div className="embla"> <div className="embla">
<div className="embla__viewport" ref={emblaRef}> <div className="embla__viewport" ref={emblaRef}>
<div className="embla__container"> <div className="embla__container">
{slides.map((index) => ( {slides.map((item, index) => (
<div className="embla__slide" key={index}> <button
className="embla__slide"
onClick={() => {
if (emblaApi) emblaApi.scrollTo(index);
}}
key={`embla.slide.${index}`}
>
<div className="embla__parallax"> <div className="embla__parallax">
<div className="embla__parallax__layer"> <div className="embla__parallax__layer">
<img <img
className="embla__slide__img embla__parallax__img" className="embla__slide__img embla__parallax__img"
src={index} src={item}
alt="" alt=""
/> />
</div> </div>
</div> </div>
</div> </button>
))} ))}
</div> </div>
</div> </div>