How to make a slider with infinite and smooth scrolling without delay? - javascript

I have a logo slider where I need to implement infinite smooth scrolling without delay. Now there is a smooth scrolling, but there is still a delay and the slider stops. How can this be resolved?
An example of how it should be (slider with logos): https://www.seven-formation.com/
const logosSlider = new Swiper(".testimonials__logos", {
loop: true,
freeMode: true,
freeModeMomentum: false,
speed: 3000,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});

Related

Animation BodyMovin starts before rendering images

Animation BodyMovin svg starts before rendering images, so after rendering animation go to end. How do delay before start animation or true start animation only after rendering all images in animation?
Run animation with ScrollTrigger, because that i think images not download before start animation.
Site: http://test.eniso.ru
var ledData = {
container: document.getElementById('led-container'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '/window.json'
};
var ledAnim = bodymovin.loadAnimation(ledData);
function playLED (animData) {
ledAnim.play();
ledAnim.setDirection(1);
ledAnim.setSpeed(20);
}
ScrollTrigger.create({
trigger: ".container",
markers: true,
start: "top",
scrub: true,
pin: true,
onEnter: playLED,
})

My Swiper.js doesn't stop on hover (only after adding speed parameter)

So I want to do this swiper.js carousel which slides linear from right to the left and after mouse hover it would stop. I used this function which works pretty fine:
$(".swiper-container3").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
If speed parameter is not defined in my swiper initialization function, then it stops after a hover (but only if the nearest slider will be on center of carousel).
How to force swiper.js to stop with the function above but not to wait for one of the sliders to be on center?
Rest of the code
const enableSwiper3 = function(){
mySwiper3 = new Swiper ('#swiper-container3', {
loop: true,
slidesPerView: "auto",
spaceBetween: 10,
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
freeMode: false,
pagination: {
el: '#swiper-pagination3',
},
paginationClickable: true,
breakpoints: {
400: {
slidesPerView: 'auto',
spaceBetween: 20,
loop: true
},
767: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
},
speed: 10000,
}
}
});
mySwiper3.autoplay.start();
}
I also want to lower its speed so whole slider goes linear very slow and just after hovering it it stops. Example on the site below: https://www.intercom.com/ (people are talking section).

SlickJs problem with vertical slider when loading two slider with same class

I am trying to use one slider code for two sliders using same class name. I have created this codepen to illustrate the problem.
Problems:
Both sliders are not behaving same, means they have different sliding pattern. I have changed the color current active slide to show how both sliders are different.
One of the slider works fine ( till some slides) but other one totally off as you can see, in terms of container height, highlight pattern, etc.
Both of them have chopped content on top or bottom, even though there is no centerMode enabled. The behaviour I was expecting is to current slide to slide on the top and not show the preview of gone slide (top) and next (bottom)
Second slider changes its height randomly. I don't know why
I have tried one solution which didn't work either and it is there as commented code in the codepen.
$(".feature-container").each(function () {
console.log(this.id);
let elm_primary = $("#" + this.id)
.find(".feature-slider")
.get(0);
$(elm_primary).slick({
slidesToShow: 5,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
arrows: false,
infinite: true,
responsive: [
{
breakpoint: 700,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
dots: false,
arrows: true
}
}
]
});
});

Swiperjs slows in the center

I am using Swiperjs as I am looking for an infinite looping swiper that never stops in the middle however I have tried many settings and cant seem to get it to work where it is the same speed and no jumping and no slowing down as it gets to the center.
Below is the best I have got it where it does not jump but it slows down as it gets into the center.
const params = {
loop: true,
speed: 5000,
freeMode: true,
freeModeFluid:true,
resistance: false,
simulateTouch: false,
waitForTransition: false,
centeredSlides: false,
freeModeMomentum: false,
freeModeMinimumVelocity: 0,
freeModeMomentumBounceRatio: 0,
freeModeMomentumBounce: false,
normalizeSlideIndex: false,
autoplay: {
delay: 1,
disableOnInteraction: true,
}
}

Flexslider continue on pop up

How do i make the flexslider continue to rotate on any screen pop up or when browser not in focus?
My code used:
// Flex Slider for Homepage
$('#home-flexslider .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
animationSpeed: 1500,
pauseOnHover: false,
directionNav: true,
controlNav: false,
keyboardNav: true,
start: function (slider) {
slider.removeClass('loading');
}
});

Categories