I am trying to add a scroll delay to my fullpage.js sections and slides.
I got this working for sections only using the following code.
var delay = 1000;
var scrollDelay = false;
$("#sections-container").fullpage({
navigation: true,
controlArrows: false,
slidesNavigation: true,
scrollHorizontally: true,
sectionSelector: ".main-section",
slideSelector: ".sub-section",
onLeave: function(origin, destination, direction) {
timeoutId = setTimeout(function() {
scrollDelay = true;
fullpage_api.moveTo(destination.index + 1);
scrollDelay = false;
}, delay);
return scrollDelay;
});
How would I go about adding a scrolling delay for both sections and slides?
fitToSectionDelay: 1000, try this in function, It is for fullpage.js
In the object of fullpage method you should add these options:
fitToSection: true,
fitToSectionDelay: 1000
Change 1000 with the number that you want. Is configured by milliseconds.
Related
When I use speed attribute with swiper slider It's take more time to stop swiper autoplay on hover
var SwiperTop = new Swiper('.swiper--top', {
spaceBetween: 0,
speed: 10000,
autoplay: {
delay: 0.1,
},
loop: true,
slidesPerView:'auto',
allowTouchMove: false,
disableOnInteraction: true,
autoplayDisableOnInteraction: false
});
$(".swiper--top").hover(function() {
SwiperTop.autoplay.stop();
}, function() {
SwiperTop.autoplay.start();
});
I have a problem with swiper slider when I use speed attribute the swiper doesn't stop immediately and take more time to stop autoplay on mouse hover
I am using swiper.js.
I would like to always have new/active slides scroll to the top, so when a new slide enters the viewport, the content must be scrolled to the top.
I have a fiddle here: https://jsfiddle.net/p406sfe4/8/
I though that this script might accomplish what I need, but it doesn't seem to work:
swiper.on('slideChangeEnd', function(s) {
s.slides.each(function() {
if ($(this).index() !== s.activeIndex) $(this)[0].scrollTop = 0
});
});
Thanks!
Unless you're restricting the height of the container/slides - causing an overflow - the scrollable content won't actually be inside each slide.
In that case you should focus on the scrollTop property of the swiper container or other parent element.
Regardless of what you're scrolling to, the event will work better if added to the initialization config. To use the code from your jsfiddle:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
hashnav: true,
autoHeight: true,
// attach callback here
onSlideChangeEnd: function (swiperObj) {
$('.swiper-container').css('scrollTop', '0');
}
});
Well, above answer did not work for me. Adding this answer to different scenario.
In my case I had multiple swiper on the same page with different wrapper ID and I was initializing Swiper with reference to its ID,
With multiple instances of swiper, I couldn't get to proper position of slider, so I had to it this way.
var SwiperItems= [];
$('.swiper-items-wrapper').each(function(i) {
var this_ID = $(this).attr('id');
SwiperItems[i] = new Swiper( '#' + this_ID + ' .swiper-contrainer', {
loop: true,
navigation: {
nextEl: '#' + this_ID + ' .swiper-button-next-outsite',
prevEl: '#' + this_ID + ' .swiper-button-prev-outsite',
},
autoHeight: true,
});
SwiperItems[i].on('slideChange', function (swiperObj) {
$('html, body').animate({
scrollTop: jQuery(SwiperItems[i].$el).offset().top
}, 1000);
);
});
I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..
what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it
here is my javascript code
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
speed: 600,
effect: 'fade',
fade: {
crossFade: true
},
onSlideChangeStart: function (Swiper){
$('.slide-info').addClass('slider-text-animation ');
},
onSlideChangeEnd: function (Swiper){
$('.slide-info').removeClass('slider-text-animation ');
},
loop: true,
autoplay: 6500
});
Try this:
mySwiper.on('slideChangeStart', function () {
$('.slide-info').addClass('slider-text-animation ');
});
mySwiper.on('slideChangeEnd', function () {
$('.slide-info').removeClass('slider-text-animation ');
});
And also, take a look at their API.
http://www.idangero.us/swiper/api/
It's just simple with Swiper API, this would help you http://idangero.us/swiper/api/#parallax
I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks
try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!
I have implemented a content fade in slide show inside the sliding content panel.
Fade in slide show is in the first li of the sliding panel but the problem is since sliding is moving randomly I am not able to show the slide show.
What I need is, Sliding should wait until the slideshow completes its animation. Once slideshow is done then the next li of the sliding panel should come up.
Here is the code used for that
//Fade in slide show
var quotes = $(".inner_detail div");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 1
});
If you wanna see the slideshow effect, please remove the slider code in js and then you can see how slideshow works. (Here a fiddle to show only slideshow)
Here is the working DEMO (in this demo the first sliding li has the slideshow div which cant be seen because sliding is moving fast)
Thanks in advance...
You can not achieve this without modifying the plugin. It doesn't maintain a reference to itself, therefore it is simply a bunch of always running functions. Your can either
Modify the plugin and add a reference to itself as seen here
Write your own version
If you decide to go with the first method, the plugin contains a 'isPaused' property, which you can play with to pause the plugin until your animation is over.
I think you can do it if you know the exact no. of elements in the Slideshow from their your can do simple Steps like
1) Wait_For_SlideToFinish = NO.Of.Elements * (fadeIn_Value + delay_Value + fadeOut_value )
2) Now you can Delay slider for xxx no of seconds Wait_For_SlideToFinish before you can initiate slider function.
If i understood your question then this can work for you.
Do you want something like this?
var quotes = $(".inner_detail div");
var quoteIndex = -1;
var fadeIn_time = 2000, delay_time = 2000, fadeOut_time = 2000;
var time_length = quotes.length*(fadeIn_time + delay_time + fadeOut_time);
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(fadeIn_time )
.delay(delay_time )
.fadeOut(fadeOut_time , showNextQuote);
}
showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: time_length,
animation: 'fade',
mousePause: false,
showItems: 1
});
I have found solution for this. I have used callback function to stop the slider until it is done with the action.
//Editorial Slide + Carousel
var isAni = true;
$(window).load(function(){
var quoteIndex = -1;
function showNextQuote(ele,e) {
++quoteIndex;
e.isPaused = true;
if(quoteIndex < ele.length-1){
ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").delay(2000).fadeOut(2000,"swing", function(){
showNextQuote(ele,e)
});
}else{
ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").fadeOut(2000,"swing",function(){ele.eq(quoteIndex+1 % ele.length).fadeIn(0);
quoteIndex = -1;e.isPaused = false;});
}
}
//showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: 3000,
animation: 'fade',
mousePause: true,
showItems: 1,
callback : function(ele,e){
var inner = ele.children("li:first").find("div.inner_detail");
if(inner.length !=0){
quoteIndex = -1;
showNextQuote(inner.find("div"),e);
}
}
});
});
PS - Call back function is written in vticker.js but unfortunately i am not able to post that file here.
Thanks all for your responses!!!