将使用 HTML、CSS 和 Swiper js 制作的响应式博客卡片滑块转换为带有 Swiper js 的 React js
Convert this Responsive Blog Card Slider made using HTML, CSS and Swiper js into React js with Swiper js
我是 React 新手,我正在尝试在我的 React 项目中使用这个博客滑块 https://codepen.io/JavaScriptJunkie/pen/WgRBxw?editors=1100。
我将 HTML 转换为 jsx 并为其添加样式,但我不知道如何在我的反应文件中使用 javascript 代码,它使用的是 Swiper js,但我不能在我的反应代码中做到这一点。
我阅读了 swiperjs 反应文档,但无法做到。
这是Javascript代码
var swiper = new Swiper('.blog-slider', {
spaceBetween: 30,
effect: 'fade',
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});
请帮助我如何在我的 React 项目中使用这个 swiper js 代码
我不知道这是否是个好主意,但请尝试使用 useEffect
挂钩在客户端执行代码。
我是这样做的。我在 React 应用程序的 public 目录中的 index.html
文件的头部包含了 SwiperJs 所需的文件。
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
然后在App.js
中使用了下面的代码。
useEffect(() => {
const script = document.createElement("script")
script.innerHTML = `
var swiper = new Swiper(".blog-slider", {
spaceBetween: 30,
effect: "fade",
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: ".blog-slider__pagination",
clickable: true,
},
})`
document.body.appendChild(script)
}, [])
这就是 App.js
之后的样子,它的工作方式与 codepen 中的相同。
import { useEffect } from "react"
import "./App.css"
function App() {
useEffect(() => {
const script = document.createElement("script")
script.innerHTML = `
var swiper = new Swiper(".blog-slider", {
spaceBetween: 30,
effect: "fade",
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: ".blog-slider__pagination",
clickable: true,
},
})`
document.body.appendChild(script)
}, [])
return (
<div className="App">
<div className="blog-slider">
<div className="blog-slider__wrp swiper-wrapper">
<div className="blog-slider__item swiper-slide">
<div className="blog-slider__img">
<img
src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg"
alt=""
/>
</div>
<div className="blog-slider__content">
<span className="blog-slider__code">26 December 2019</span>
<div className="blog-slider__title">Lorem Ipsum Dolor</div>
<div className="blog-slider__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae voluptate repellendus magni illo ea animi?{" "}
</div>
<a href="#" className="blog-slider__button">
READ MORE
</a>
</div>
</div>
<div className="blog-slider__item swiper-slide">
<div className="blog-slider__img">
<img
src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg"
alt=""
/>
</div>
<div className="blog-slider__content">
<span className="blog-slider__code">26 December 2019</span>
<div className="blog-slider__title">Lorem Ipsum Dolor2</div>
<div className="blog-slider__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae voluptate repellendus magni illo ea animi?
</div>
<a href="#" className="blog-slider__button">
READ MORE
</a>
</div>
</div>
<div className="blog-slider__item swiper-slide">
<div className="blog-slider__img">
<img
src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg"
alt=""
/>
</div>
<div className="blog-slider__content">
<span className="blog-slider__code">26 December 2019</span>
<div className="blog-slider__title">Lorem Ipsum Dolor</div>
<div className="blog-slider__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae voluptate repellendus magni illo ea animi?
</div>
<a href="#" className="blog-slider__button">
READ MORE
</a>
</div>
</div>
</div>
<div className="blog-slider__pagination"></div>
</div>
</div>
)
}
export default App
我是 React 新手,我正在尝试在我的 React 项目中使用这个博客滑块 https://codepen.io/JavaScriptJunkie/pen/WgRBxw?editors=1100。
我将 HTML 转换为 jsx 并为其添加样式,但我不知道如何在我的反应文件中使用 javascript 代码,它使用的是 Swiper js,但我不能在我的反应代码中做到这一点。 我阅读了 swiperjs 反应文档,但无法做到。
这是Javascript代码
var swiper = new Swiper('.blog-slider', {
spaceBetween: 30,
effect: 'fade',
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});
请帮助我如何在我的 React 项目中使用这个 swiper js 代码
我不知道这是否是个好主意,但请尝试使用 useEffect
挂钩在客户端执行代码。
我是这样做的。我在 React 应用程序的 public 目录中的 index.html
文件的头部包含了 SwiperJs 所需的文件。
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
然后在App.js
中使用了下面的代码。
useEffect(() => {
const script = document.createElement("script")
script.innerHTML = `
var swiper = new Swiper(".blog-slider", {
spaceBetween: 30,
effect: "fade",
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: ".blog-slider__pagination",
clickable: true,
},
})`
document.body.appendChild(script)
}, [])
这就是 App.js
之后的样子,它的工作方式与 codepen 中的相同。
import { useEffect } from "react"
import "./App.css"
function App() {
useEffect(() => {
const script = document.createElement("script")
script.innerHTML = `
var swiper = new Swiper(".blog-slider", {
spaceBetween: 30,
effect: "fade",
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: ".blog-slider__pagination",
clickable: true,
},
})`
document.body.appendChild(script)
}, [])
return (
<div className="App">
<div className="blog-slider">
<div className="blog-slider__wrp swiper-wrapper">
<div className="blog-slider__item swiper-slide">
<div className="blog-slider__img">
<img
src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg"
alt=""
/>
</div>
<div className="blog-slider__content">
<span className="blog-slider__code">26 December 2019</span>
<div className="blog-slider__title">Lorem Ipsum Dolor</div>
<div className="blog-slider__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae voluptate repellendus magni illo ea animi?{" "}
</div>
<a href="#" className="blog-slider__button">
READ MORE
</a>
</div>
</div>
<div className="blog-slider__item swiper-slide">
<div className="blog-slider__img">
<img
src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg"
alt=""
/>
</div>
<div className="blog-slider__content">
<span className="blog-slider__code">26 December 2019</span>
<div className="blog-slider__title">Lorem Ipsum Dolor2</div>
<div className="blog-slider__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae voluptate repellendus magni illo ea animi?
</div>
<a href="#" className="blog-slider__button">
READ MORE
</a>
</div>
</div>
<div className="blog-slider__item swiper-slide">
<div className="blog-slider__img">
<img
src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg"
alt=""
/>
</div>
<div className="blog-slider__content">
<span className="blog-slider__code">26 December 2019</span>
<div className="blog-slider__title">Lorem Ipsum Dolor</div>
<div className="blog-slider__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Recusandae voluptate repellendus magni illo ea animi?
</div>
<a href="#" className="blog-slider__button">
READ MORE
</a>
</div>
</div>
</div>
<div className="blog-slider__pagination"></div>
</div>
</div>
)
}
export default App