How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoPlay() and .startAutoPlay() function but not worked for me.
thank you here is code.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 0,
loop: true,
effect: 'slide',
longSwipes: true,
autoplay:2000,
autoplayDisableOnInteraction:true,
});
$(".swiper-container").mouseenter(function(){
swiper.stopAutoPlay();
});
$(".swiper-container").mouseleave(function(){
swiper.startAutoPlay();
});
Check swiper API docs, u should use mySwiper.startAutoplay(), letter "p" is lowercase
Related
I'm using SweetAlert v10.14.1 as a toastr with code
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-right',
showConfirmButton: false,
timer: 5000,
})
</script>
it works fine .. but the message dropped down from top with white background .. i want to :
1- fade it in and out
2- change apperance to a bootstrap theme
No fade-in effect at the moment. If you want to remove the "boing" effect, you can just do it adding to your props:
Swal.fire({
... you other props...
showClass: {
popup: "", // it removes the 'boing' effect, the default value is 'swal2-show'
},
});
Below is my swiper slider initialization script.
var swiper = new Swiper('.swiper-container', {
effect: 'fade',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
height:490,
loop: true,
arrows:false,
autoplay: 4500,
autoplayDisableOnInteraction: false,
paginationBulletRender: function (index, className) {
var slide = $('.' + this.wrapperClass).find('.headermainslider')[index];
return '<span class="' + className + '"><a href="'+$(slide).attr('data-rel')+'" >' + $(slide).attr('data-value') + '</a></span>';
}
});
Each pagination bullet i have create a div and inside div anchor link is place. When i click on bullet slider will change but anchor link not works.
Due to paginationonClickable when I click on anchor link inside bullet div than anchor link not work and current slide change.
I want both condition to work. So can anyone help to resolve this issue.
In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);
I have a website http://www.raggeddaisy.com where I have implemented the Flexslider utility. On my Default page, The Slider images are scrolling correctly, however, the Carousel images underneath aren't scrolling in combination with the Slider image. As the Slider image scrolls correctly, the carousel seems to jump four images at a time even though it doesn't highlight one of the images in the carousel that is visable.
This same piece of code (minus the actual images) is duplicated on my http://www.raggeddaisy.com/MagneticBoards.csthml page and the slider images work perfectly.
Can anyone help me figure out why this is behaving differently on the two pages?
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
Thanks in advance.
Try to add the move attribute (number of slides that the slider should move) to the carousel, like this.
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider',
move: 1 // ADDED
});
I am using a flexslider slideshow on my website and it is too fast. I would like it to pause between each slide. There are 3 slides. It is not easy read all the text on one of the slides before another slide shows up.
The below code is from the Functions.js file. How can I slow down the slide and let it pause between each slide.
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".slider-holder",
slideshowSpeed: 7000,
directionNav: false,
controlNav: true,
animationDuration: 5000,
before:function( slider ){
$('.img-holder').animate({'bottom' : '-30px'},300)
},
after:function( slider ){
$('.img-holder').animate({'bottom' : '0px'},300)
}
});
});
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".slider-holder",
slideshowSpeed: 7000,
directionNav: false,
controlNav: true,
animationSpeed: 6000,
before:function( slider ){
$('.img-holder').animate({'bottom' : '-30px'},300)
},
after:function( slider ){
$('.img-holder').animate({'bottom' : '0px'},300)
}
});
});
use animationSpeed: 6000 option control the speed,value is in millseconds 6000=6 seconds,also remove animationDuration ,there is no such option