mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 15:54:39 +00:00
feat: add scrolling to the courusel
This commit is contained in:
parent
a30ddcfc6a
commit
894fe14eaf
GPG key ID:
858E8EE696525EED
7 changed files with 93 additions and 48 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import { Navbar } from "./components/Navbar/Navbar";
|
||||
import { Inter } from "next/font/google";
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const App = (props) => {
|
||||
return (
|
||||
<body className={`${inter.className} overflow-x-hidden`}>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,68 @@
|
|||
"use client";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
|
||||
import Link from "next/link";
|
||||
|
||||
import Styles from "./ReleaseCourusel.module.css";
|
||||
import Swiper from "swiper";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { Navigation } from "swiper/modules";
|
||||
|
||||
export const ReleaseCourusel = (props) => {
|
||||
useEffect(() => {
|
||||
const options = {
|
||||
direction: "horizontal",
|
||||
spaceBetween: 8,
|
||||
allowTouchMove: true,
|
||||
slidesPerView: "auto",
|
||||
navigation: {
|
||||
enabled: false,
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
450: {
|
||||
navigation: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
modules: [Navigation],
|
||||
};
|
||||
new Swiper(".swiper", options);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="group relative">
|
||||
<div className="flex justify-between border-b-2 border-black px-4">
|
||||
<section className={`${Styles.section}`}>
|
||||
<div className="flex justify-between px-4 border-b-2 border-black">
|
||||
<h1 className="font-bold text-md sm:text-xl">{props.sectionTitle}</h1>
|
||||
<a href={props.showAllLink}>
|
||||
<Link href={props.showAllLink}>
|
||||
<div className="flex items-center">
|
||||
<p className="font-bold hidden sm:block text-xl">Показать все</p>
|
||||
<span className="iconify mdi--arrow-right w-6 h-6"></span>
|
||||
<p className="hidden text-xl font-bold sm:block">Показать все</p>
|
||||
<span className="w-6 h-6 iconify mdi--arrow-right"></span>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-2 overflow-x-scroll p-4 scrollbar-none"
|
||||
id={props.id}
|
||||
>
|
||||
<div className="m-4">
|
||||
<div className="swiper">
|
||||
<div className="swiper-wrapper">
|
||||
{props.content.map((release) => {
|
||||
return <ReleaseLink key={release.id} {...release} />;
|
||||
return (
|
||||
<div
|
||||
className="swiper-slide"
|
||||
key={release.id}
|
||||
style={{ width: "fit-content" }}
|
||||
>
|
||||
<ReleaseLink {...release} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={`swiper-button-prev ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-left aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`} style={{"--swiper-navigation-size": "64px"}}></div>
|
||||
<div className={`swiper-button-next ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-right aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`} style={{"--swiper-navigation-size": "64px"}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
11
app/components/ReleaseCourusel/ReleaseCourusel.module.css
Normal file
11
app/components/ReleaseCourusel/ReleaseCourusel.module.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.swiper-button:global(.swiper-button-disabled) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.section .swiper-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.section:hover .swiper-button {
|
||||
display: flex !important;
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@ import Link from "next/link";
|
|||
export const ReleaseLink = (props) => {
|
||||
const grade = props.grade.toFixed(1);
|
||||
return (
|
||||
<Link href={`/release/${props.id}`} className=" hover:scale-105 transition hover:z-10">
|
||||
<Link href={`/release/${props.id}`}>
|
||||
<div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px]">
|
||||
<div className="bg-gradient-to-t from-black to-transparent relative w-full h-full">
|
||||
<div className="relative w-full h-full bg-gradient-to-t from-black to-transparent">
|
||||
<img
|
||||
className="w-full h-full object-cover absolute mix-blend-overlay"
|
||||
className="absolute object-cover w-full h-full mix-blend-overlay"
|
||||
src={props.image}
|
||||
alt=""
|
||||
/>
|
||||
|
|
@ -26,10 +26,10 @@ export const ReleaseLink = (props) => {
|
|||
>
|
||||
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{grade}</p>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2 bg-gray-500 rounded-sm">
|
||||
<div className="absolute bg-gray-500 rounded-sm top-2 right-2">
|
||||
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{props.status.name}</p>
|
||||
</div>
|
||||
<p className="absolute left-2 bottom-2 text-white">{props.title_ru}</p>
|
||||
<p className="absolute text-xs text-white md:text-base lg:text-lg left-2 bottom-2">{props.title_ru}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* :root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
} */
|
||||
|
|
|
|||
19
package-lock.json
generated
19
package-lock.json
generated
|
|
@ -11,6 +11,7 @@
|
|||
"next": "14.2.5",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"swiper": "^11.1.4",
|
||||
"swr": "^2.2.5",
|
||||
"zustand": "^4.5.4"
|
||||
},
|
||||
|
|
@ -4398,6 +4399,24 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.1.4",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz",
|
||||
"integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/swr": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"next": "14.2.5",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"swiper": "^11.1.4",
|
||||
"swr": "^2.2.5",
|
||||
"zustand": "^4.5.4"
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue