mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 07:44:38 +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 { Navbar } from "./components/Navbar/Navbar";
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
const inter = Inter({ subsets: ["latin"] });
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
export const App = (props) => {
|
export const App = (props) => {
|
||||||
return (
|
return (
|
||||||
<body className={`${inter.className} overflow-x-hidden`}>
|
<body className={`${inter.className} overflow-x-hidden`}>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,67 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
|
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) => {
|
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 (
|
return (
|
||||||
<section className="group relative">
|
<section className={`${Styles.section}`}>
|
||||||
<div className="flex justify-between border-b-2 border-black px-4">
|
<div className="flex justify-between px-4 border-b-2 border-black">
|
||||||
<h1 className="font-bold text-md sm:text-xl">{props.sectionTitle}</h1>
|
<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">
|
<div className="flex items-center">
|
||||||
<p className="font-bold hidden sm:block text-xl">Показать все</p>
|
<p className="hidden text-xl font-bold sm:block">Показать все</p>
|
||||||
<span className="iconify mdi--arrow-right w-6 h-6"></span>
|
<span className="w-6 h-6 iconify mdi--arrow-right"></span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="m-4">
|
||||||
className="flex gap-2 overflow-x-scroll p-4 scrollbar-none"
|
<div className="swiper">
|
||||||
id={props.id}
|
<div className="swiper-wrapper">
|
||||||
>
|
{props.content.map((release) => {
|
||||||
{props.content.map((release) => {
|
return (
|
||||||
return <ReleaseLink key={release.id} {...release} />;
|
<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>
|
</div>
|
||||||
</section>
|
</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) => {
|
export const ReleaseLink = (props) => {
|
||||||
const grade = props.grade.toFixed(1);
|
const grade = props.grade.toFixed(1);
|
||||||
return (
|
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="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
|
<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}
|
src={props.image}
|
||||||
alt=""
|
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>
|
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{grade}</p>
|
||||||
</div>
|
</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>
|
<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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,3 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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",
|
"next": "14.2.5",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
|
"swiper": "^11.1.4",
|
||||||
"swr": "^2.2.5",
|
"swr": "^2.2.5",
|
||||||
"zustand": "^4.5.4"
|
"zustand": "^4.5.4"
|
||||||
},
|
},
|
||||||
|
|
@ -4398,6 +4399,24 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/swr": {
|
||||||
"version": "2.2.5",
|
"version": "2.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
"next": "14.2.5",
|
"next": "14.2.5",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
|
"swiper": "^11.1.4",
|
||||||
"swr": "^2.2.5",
|
"swr": "^2.2.5",
|
||||||
"zustand": "^4.5.4"
|
"zustand": "^4.5.4"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue