I'm using Revolution slider to create a carousel in my website. My site isn't a wordpress so i use the Jquery version of Revolution slider. This is my code:
<script type="text/javascript">
var tpj=jQuery;
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"../libs/revolutionSlider/js/",
dottedOverlay:"none",
sliderLayout: "auto",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"",
enable:true,
hide_onmobile:true,
hide_under:300,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
}
,
thumbnails: {
style:"",
enable:true,
width:100,
height:50,
min_width:60,
wrapper_padding:20,
wrapper_color:"transparent",
wrapper_opacity:"1",
tmp:'<span class="tp-thumb-img-wrap"> <span class="tp-thumb-image"></span></span>',
visibleAmount:3,
hide_onmobile:true,
hide_under:100,
hide_onleave:false,
direction:"horizontal",
span:false,
position:"outer-bottom",
space:5,
h_align:"center",
v_align:"bottom",
h_offset:0,
v_offset:50
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 3,
infinity: "on",
space: 0,
stretch: "off"
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[600,600,500,400],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:0,
shuffle:"off",
autoHeight:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
</script>
It creates a carousel with thumbnails, it works correctly but i can't stop the autoplay, how i can do? In my code is already setted :
stopAfterLoops:0,
stopAtSlide:0
I'm using Revolution slider to create a carousel in my website. My site isn't a wordpress so i use the Jquery version of Revolution slider. This is my code:
<script type="text/javascript">
var tpj=jQuery;
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"../libs/revolutionSlider/js/",
dottedOverlay:"none",
sliderLayout: "auto",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"",
enable:true,
hide_onmobile:true,
hide_under:300,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
}
,
thumbnails: {
style:"",
enable:true,
width:100,
height:50,
min_width:60,
wrapper_padding:20,
wrapper_color:"transparent",
wrapper_opacity:"1",
tmp:'<span class="tp-thumb-img-wrap"> <span class="tp-thumb-image"></span></span>',
visibleAmount:3,
hide_onmobile:true,
hide_under:100,
hide_onleave:false,
direction:"horizontal",
span:false,
position:"outer-bottom",
space:5,
h_align:"center",
v_align:"bottom",
h_offset:0,
v_offset:50
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 3,
infinity: "on",
space: 0,
stretch: "off"
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[600,600,500,400],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:0,
shuffle:"off",
autoHeight:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
</script>
It creates a carousel with thumbnails, it works correctly but i can't stop the autoplay, how i can do? In my code is already setted :
stopAfterLoops:0,
stopAtSlide:0
-
can you try
stopAfterLoops: 1– vijayP Commented Jul 20, 2016 at 9:30 - thanks but it doesn't works – user31929 Commented Jul 20, 2016 at 9:41
- how many slides do you have? – vijayP Commented Jul 20, 2016 at 9:47
- 3 slides, but i have just found a solution – user31929 Commented Jul 20, 2016 at 9:53
- Use the API Method: $("#rev_slider_2_1").revpause(); and .revresume(); to stop and start your slider from jquery. – jbraun Commented Mar 13, 2018 at 20:37
2 Answers
Reset to default 3I works in this way:
stopAfterLoops:0,
stopAtSlide:1,
I works in this way:
revapi2 = tpj("#rev_slider_2_1").show().revolution({
...
stopLoop: "on",
...
});