SwiperJS hide last items | Cannot reach last items with arrow - javascript

Hello,
I have a problem with SwiperJS which is, I can't reach the last item if I only click on the arrow.
Swiper stop his-self two items before the really end but if I "click swipe" with my mouse without passing by the arrow it work, i'm now at my last item and if I try to go back to my first from there the same problem happen for the begining so I think something is wrong with the center and the limits of next and prev.
Also notice that my prev and next arrow pass to disabled too early. I can't found what's wrong in code about it.
Expected:
Click on arrow and reach all the items in my swiper from the first to the last and vice versa.
Actual:
Can go from first to before last || From last to before first
Maybe this is not the good part of code :|
var swiper4 = new Swiper('.expert', {
//effect:"fade",
direction: 'horizontal',
slidesPerColumnFill: 'row',
slidesPerColumn: 0,
spaceBetween: 3,
pagination: {
el: '.swiper-pagination',
type: 'custom',
renderCustom: function (swiper, current, total) {
return ('0' + current).slice(-2) + '/' + ('0' + total).slice(-2);
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

Related

SwiperJS move more than just one slide on click

I want to implement the feature, when I click arrow it moves 3 or 4 slides to the right or to the left, not just one slide.
I am working with Angular
Feature, when it moves one slide works, but I can't get moving more than just one slide to work.
Here is code for moving just one slide to the right or to the left
scrollLeft() {
this.swiper!.swiperRef.slidePrev(500);
this.scrollArrows();
}
scrollRight() {
this.swiper!.swiperRef.slideNext(500);
this.scrollArrows();
}
Config:
swiperConfig: any = {
slidesPerView: 'auto',
loop: true,
spaceBetween: 20,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
};
Thanks for everyone to help.

Animation disappears on end LottieJS

I have an animation build with LottieJS which loops like:
var lottieLogo = lottie.loadAnimation({
container: document.getElementById('icon_logo'), // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: false,
path: 'path-to-json'
});
lottieLogo.play();
Then after animation is done I want to pause for 10 seconds like:
function logoAnimation() {
lottieLogo.pause();
setTimeout(
function()
{
lottieLogo.play();
}, 10000);
}
lottieLogo.addEventListener('loopComplete', logoAnimation);
It works fine but the only problem is that the animation disappears for about 0.2 seconds every time it loads again. Anyone familiar with this problem?
If you set loop to false it should give you the desired effect.

Owl Carousel limit number of loops with autoPlayTimeout doesn't stop looping

Is autoPlayTimeout not intended to stop autoplay:true? Because no matter what I try Owl Carousel never stops.
$('.owl-carousel').owlCarousel({
items: 1,
autoplay:true,
autoPlaySpeed:500,
autoPlayTimeout:5000,
autoPlayHoverPause:true,
loop:true,
Surely someone else wanted something other than loop forever, since that is annoying.
You can combine the 'stop.owl.autoplay' trigger with a timer and stop the carousel after going through each slide once, or twice or as much as you want.
In order to loop it twice and stop, you can use the following configurations:
loop: true
autoplayTimeout : 1000 (1 second just for the example)
items: 1
Now with these options, your slider will loop forever, showing one slide for 1 second and move to the next one.
In order to stop it after going through each slide twice, you can use the 'onInitialized' event provided by owl and call a function when the slider is initialized. Let's say you have 3 slides in total, so if you want to stop it after the second loop, you have to wait 6000ms (6 seconds).
So in the callback function, you can set a timer to stop the slider at the 6th second.
Example carousel :
let $carousel = $('.carousel');
let itemsCount = Number($('.carousel').attr("data-items"));
let autoplayTimeout = 1000;
let loops = 2;
$carousel.owlCarousel({
loop: true,
autoplay: true,
nav: true,
dots: true,
items: 1,
autoplayTimeout: autoplayTimeout,
// Stops after the second cycle
onInitialized : stopTimer({
itemsCount,
autoplayTimeout,
loops
}),
});
function stopTimer(params) {
setTimeout(
function() {
$carousel.trigger('stop.owl.autoplay');
},
params.itemsCount * Number(params.autoplayTimeout) * params.loops
);
}
You can find more events, provided by owl HERE.
Hope this will help! :)
To stop the owl carousel, you can trigger:
$('.owl-carousel').trigger('stop.owl.autoplay')
JSFiddle

how to use scrollIt.js in different pages with different topOffset?

This is a nice jQuery plugin that i use for my site.
scrollIt.js
In the option section:
$.scrollIt({
upKey: 38, // key code to navigate to the next section
downKey: 40, // key code to navigate to the previous section
easing: 'linear', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
topOffset: 0 // offste (in px) for fixed top navigation
});
I set the "topOffset" to "-160", and it works fine. Now on the other page i'm calling the same function but now I want the "topOffset" to be "0". How would i achieve that please?
Solve the problem myself by doing this:
if( $(".main-body").hasClass("home-vertical-scroll") ){
var scrollItTopOffset = 0;
}
else{
var scrollItTopOffset = -160;
};
$(function(){
$.scrollIt({
upKey: 38,
downKey: 40,
easing: 'linear',
scrollTime: 600,
onPageChange: null,
topOffset: scrollItTopOffset
});
});
In case someone want the answer.

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});​
This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}
Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).
The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)

Categories