我在 Next.js 应用程序中实现了Tiny Slider，它需要页面上的内联脚本来控制滑块的行为。现在，虽然脚本在我第一次启动 index.js 时正确加载，但是每当我使用 Link 导航到另一个页面并返回到 index.js 时，脚本都不会加载。
这是我在 index.js 中编写脚本的方式
{/* Script */}
<Script id='tester'>
{`
var slider = tns({
container: '.my-slider',
items: 6,
autoplay: true,
autoplayTimeout: 2000,
gutter: 20,
autoplayButtonOutput: false,
controls: false,
navPosition: 'bottom',
nav: false,
mouseDrag: true,
arrowKeys: true,
responsive: {
300: {
items: 2,
gutter: 50,
center: true,
fixedWidth: 250,
},
700: {
items: 3,
gutter: 50,
center: true,
fixedWidth: 250,
},
1440: {
items: 3,
gutter: 50,
fixedWidth: 250,
center: …我试图在我的网站的登陆页面上获得视差效果.我使用了interactive_bg.js插件,并从演示教程向后工作,我终于能够获得我想要的效果所需的图片.
这是我的代码:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: …所以我对 Next.JS 相当陌生，并且一直在尝试将它与 Bootstrap 一起使用。问题是，我无法在现场将 Bootstrap 类与我自己的自定义 CSS 类一起使用className。我在这里找到了这个确切问题的两个答案，它们都建议使用模板文字。然而，这对我来说不起作用。
这就是我的代码目前的样子。
import homeSytle from '../styles/Home.module.css'
export default function Home() {
return (
<div className='text-center h-100'>
<div className={'${homeSytle.bgMain} container-fluid'}>
<h1>Test</h1>
<button type="button" className="btn btn-primary mt-5">Primary</button>
</div>
</div>
)
}
根据这个答案，上面的代码应该可以正常工作。然而，VS Code 一直说homeStyle导入从未被使用过，不用说，我没有看到我的背景图像。
如何在同一className属性中使用我自己的自定义 CSS 类编写 Boostrap 类？