小编Ser*_*Jar的帖子

因此，我根据朋友的推荐使用 Swiper.js 来创建自动滚动滑块。但我不知道如何使幻灯片之间的过渡平滑。目前，当我更改自动播放毫秒时，它只会更改更改幻灯片所需的时间。

这是我的代码：

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

import ReviewCard from "../Review/ReviewCard";
import ReviewCard2 from "../Review/ReviewCard2";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import "swiper/css";

// import required modules
import { Autoplay } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={8}
        spaceBetween={30}
        slidesPerGroup={1}
        autoplay={{
          delay: 5500,
          disableOnInteraction: false,
        }}
        loop={true}
        loopFillGroupWithBlank={true}
        breakpoints={{
          // when window width is >= 320px
          320: { …

因此，我花了一段时间尝试隐藏网站某些页面中的导航和页脚组件，但遗憾的是没有运气。我在 Stackoverflow 上尝试了多种解决方案，其中只有一种通过创建一个新的布局组件然后将其放入路由中来部分工作，然后从登录页面中排除页脚和导航。但问题是它有效，但在主页上它只显示页脚和导航，中间没有像我在主页中所做的设计那样。

对我有用的唯一解决方案是创建 和 就像我在示例中所做的那样，但是我无法排除某些页面并将它们隐藏在那里......

这是它目前的样子，但不起作用：

import React from "react";
import Home from ".//Pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./Pages/Dashboard";
import Login from "./Pages/Login";
import Price from "./Pages/Price";
import ErrorPage from "./Pages/ErrorPage";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Profile from "./Pages/Profile";

function App() {
  return (
    <Router>
      <nav>
        <Navbar />
      </nav>

      <Routes>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Login" element={<Login />} />
        <Route …