【发布时间】：2018-03-16 16:53:11
【问题描述】：
我在一个网站上使用 jQuery 版本的 Slider Revolution。我已经多次使用它而没有问题，但在这种情况下，我的幻灯片转换无法正常工作。我尝试了几种不同的过渡，但没有工作，但其他一切都很好。我在控制台中没有收到任何错误，而且我的想法已经不多了。
这是我正在使用的标记：
<div id="rev_slider_1" class="rev_slider" data-version="5.4.1" style="display:none;">
<ul>
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<div class="kicker-promo no-margin">
<a href="/">
<img alt="" class="kicker-promo-img" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_01_us?qlt=90,1" class="rev-slidebg">
<img alt="" class="kicker-promo-img-overlay" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_01_overlay_us?qlt=90,1" class="rev-slidebg">
</a>
</div>
</li>
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<div class="kicker-promo no-margin">
<a href="/">
<img alt="" class="kicker-promo-img" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_02_us?qlt=90,1" class="rev-slidebg">
<img alt="" class="kicker-promo-img-overlay" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_02_overlay_us?qlt=90,1" class="rev-slidebg">
</a>
</div>
</li>
</ul>
滑块设置：
<script type="text/javascript">
/* https://learn.jquery.com/using-jquery-core/document-ready/ */
jQuery(document).ready(function() {
/* initialize the slider based on the Slider's ID attribute */
jQuery('#rev_slider_1').show().revolution({
sliderType:"standard",
sliderLayout:"auto",
dottedOverlay:"none",
delay:3000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
mouseScrollReverse:"default",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
,
bullets: {
enable: true,
style: 'hermes',
container: 'slider',
h_align: 'center',
v_align: 'bottom',
h_offset: 0,
v_offset: 20,
space: 5
}
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"100%",
presize:false
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth:[1230,1024,767,480],
gridheight:[720,720,480,360],
lazyType:"none",
parallax: {
type:"scroll",
origo:"enterpoint",
speed:400,
levels:[5,10,15,20,25,30,35,40,45,50,46,47,48,49,50,55],
type:"scroll",
},
shadow:0,
spinner:"off",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
});
</script>
另一件可能值得注意的事情是，我在这个特定页面上运行了三个滑块实例。它们几乎完全相同，并且除了转换之外还具有功能。
【问题讨论】：
-
可以添加代码片段吗？
-
如果您删除其他滑块以使页面中只有一个，会发生什么情况？你使用的库是什么版本的？
-
顺便说一句，您只包含一次库，而且是在您在这些脚本中调用它之前，对吧？
-
这个问题不完整。根据您的询问方式，原因可能是无限的。请具体说明您的要求，并至少提供简短的可重复 sn-p。仅分配赏金并不能保证最佳答案。
-
你能完成这个codepen吗？ codepen.io/ZPiDER/pen/rdZXZm 我无法让旋转滑块包括正常工作。每个人都可以更轻松地使用一支完整的笔。
标签： javascript jquery html revolution-slider