- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
好的,这是我第一次尝试使用 Nivo Slider。我的 slider 卡在 4 号照片上,根本无法滑动。我几乎完全不知道如何调用底部的项目符号导航。这是我的代码;
HEAD 中的样式表:
<link href="nivo-slider.css" rel="stylesheet" type="text/css" />
页面上的 Nivo Slider div:
<div id="nivo_slider">
<div id="slider" class="nivoSlider">
<img src="images/slideshow/1.jpg" width="791" height="254" />
<img src="images/slideshow/5.jpg" width="791" height="254" />
<img src="images/slideshow/3.jpg" width="791" height="254" />
<img src="images/slideshow/2.jpg" width="791" height="254" />
<img src="images/slideshow/4.jpg" width="791" height="254" />
</div>
</div>
页面底部的 JavaScript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:false, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
});
</script>
这是我的 CSS:
#nivo_slider {
width:791px;
height:254px;
float:left;
margin-left:46px;
padding:8px;
background:#e6e5e5;
border:solid 1px #d1d1d1;
}
#slider {
float:left;
width:791px;
position:relative;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
我一遍又一遍地浏览 Dev7 的演示和支持页面,但我完全迷路了。任何帮助都会很棒!
最佳答案
你有一个语法错误应该是
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:false, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next' // Next directionNav text
});
});
</script>
关于javascript - Nivo Slider 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5524345/
我的网站有 4 个子页面。我想在每个页面上以不同的高度添加 nivo slider 。我已经成功添加了 3 个 slider ,但是在一个页面上我想显示 nivo-controlNav 并且 marg
有没有办法使用不同的 HTML 标记来填充 Nivo Slider 中的标题文本?对于搜索引擎,我不希望将内容塞入图像标签的标题属性中。 目前: 我想要这样的东西: Blah blah paragr
我无法打印 nivo slider (默认主题): http://nivo.dev7studios.com/theme-demos/ 我不知道为什么,这几天我一直在努力寻找解决方案。 我试过类似的东西
在 html 中我会有这样的东西 一旦显示,它仍然会显示 它不会将我的类推送到 nivo-caption div,但我需要添加 extraclass1,有什么方法可以做到这一点吗?我需要为每个 n
我在 Volusion 上使用 Nivo Slider,无法弄清楚如何获取箭头和元素符号来替换 Prev、Next 和 slider 底部的数字。我输入了 使用主题默认但它不会将其拉到页面。 slid
希望你能帮我解决这个问题: 所以,我的 Nivo slider 工作正常,并且我以支持方式内置了一些 HTML 标题。然后我用 h1 和 h2 标签设计了 HTML 标题。然后我实现 cufon 以用
希望有人可以帮助我解决我在新设计中实现的 nivo slider 背景定位的 css。 .nivo-nextNav 的背景位置被忽略了,我不明白为什么。 这是我的CSS: /* Direction n
好的,这是我第一次尝试使用 Nivo Slider。我的 slider 卡在 4 号照片上,根本无法滑动。我几乎完全不知道如何调用底部的项目符号导航。这是我的代码; HEAD 中的样式表: 页面上的
我正在 react.js 中使用 Nivo (nivo(.dot)rocks)) 制作流程图。如何自定义工具提示?文档没有谈到这一点。 最佳答案 在适合我的 nivo 折线图类型案例中: {
我正在使用 nivo 折线图,并希望将 x 轴用作时间线,最多一分钟。 不幸的是,我无法呈现该图表,因为它无法正确读取日期。例如,这是我的数据的一部分: { x: "2020-04-24T13:07:
我在我的一个项目中使用 Nivo 图表,并且我已经实现了 nivo 图表设置,因为他们已经在他们的网站中实现了这些设置。 但是,除了 nivo 提供的内容之外,我还想添加一些我自己的自定义颜色主题选项
我正在使用 nivo 图表来可视化一些病态数据集。 例子是这样的, import { ResponsiveLine } from '@nivo/line' const MyResponsiveLine
是否可以在 NIVO SLIDER 中将幻灯片设为链接? 最佳答案 嗯,不知道是不是一样,但是...... 我在 IE 所有版本中的链接都有问题,其他浏览器工作正常,通过添加解决: backgroun
我有一个 ResponsiveBar我的 React 应用程序中的组件,但颜色未按预期显示。我已遵循 official docs 中的指南.数据如下所示: { "data": [ {
我正在使用 nivo slider (默认主题),我将上一个和下一个箭头定位在图像旁边(不是在图像顶部),我想知道是否有一种方法可以始终显示下一个和上一个箭头(现在箭头仅在您将鼠标悬停在图像上时显示)
我正在介绍一个非常奇怪的情况。我在网站上添加了一个 nivo slider ,但是当我打开幻灯片导航器上的 controlnav 时,它由数字组成。问题是我想用项目符号而不是那些数字。我尝试添加 te
我刚刚对该站点http://berlin-hipster.de/andersdenken/进行了一些非常小的更改,现在已经出现了很多问题,我想这只是一个缺少的分号或类似的东西,但是我可以修复几乎所有内
我正在尝试创建一个 React nivo 折线图,其中包含虚线而不是实线。我研究过图案,但不知道如何制作图案。感谢您的帮助。 最佳答案 nivo 在库中提供了自定义图层功能,您可以使用它来自定义从实线
我使用免费下载中包含的演示代码安装了 Nivo Slider。 我包含在 slider 中的所有图像都是 800 像素宽。 但是,它们的大小正在调整为 1440 像素宽。正在插入额外的代码: 我搜索
我正在尝试创建一个 React nivo 折线图,其中包含虚线而不是实线。我研究过图案,但不知道如何制作图案。感谢您的帮助。 最佳答案 nivo 在库中提供了自定义图层功能,您可以使用它来自定义从实线
我是一名优秀的程序员,十分优秀!