We Keep Coding

SwiperJS hide last items | Cannot reach last items with arrow

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',
},
});

Making to slide more than one item ahead in OwlCarousel

I having two synced OwlCarousel sliders. The goal is to achieve - group of items sliding in first main slider. Now it's sliding from 1 to 2 to 3 etc. I need it to slide from 1 to 5. Is there some values i can change in js?
https://codepen.io/washaweb/pen/KVRxRW
.owlCarousel({
items : slidesPerPage,
dots: false,
nav: false,
autoplay: false,
smartSpeed: 200,
slideSpeed : 500,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
slideBy: '1', //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
And how can i change sliding animation? For example fadein

You could try to.owl.carousel event:
var jumpTo = 5;
$('#sync2').trigger('to.owl.carousel', jumpTo);
Carousel #sync2 jumps to slide number 5. You can trigger this by other owl events or by clicks.

How do I deal with cloned slides to create a seamless html5 video slider in SlickJS?

I'm using slickJS to create a slider with HTML5 video backgrounds for each slide. Here's my SlickJS init code:
$homeSlider.slick({
adaptiveHeight: true,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
fade: false,
initialSlide: startSlide,
lazyLoad : 'progressive',
onBeforeChange: beforeSlickChange
});
Everything's working fine except that when I reach the end of the list of slides and try to go to the next slide (this loops back to the first slide), Slick shows a cloned slide for a moment and then the real first slide. Because of this, I'm unable to get a seamless transition between the last and first slide going in either direction. When I click forward to the first slide from the last slide or to the last slide from the first slide, the dummy slide appears (with no video playing) and after about 500ms or so, the real slide takes its place with the video playing.
What I'd like to happen is for the video to be playing seamlessly when transitioning two slides. I tried playing the video on the cloned slide and then playing the real slide's video from a slightly later point so that when the cloned slide disappeared, the real slide's video would be at the same point and there would be no noticeable change. However, the amount of time it takes for the cloned slide to disappear seems inconsistent.
Does anyone have a solution for this problem? Changing the slider to fade instead of slide fixes this problem, but I'd like to keep the sliding behavior. Thank you!

I managed to solve this problem. What I did was to play the video on the cloned slide and the real slide and then set the currentTime property of the real slide to that of the cloned slide on the afterChange event. The code looks like this:
Init code:
$homeSlider.slick({
adaptiveHeight: true,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
fade: false,
initialSlide: startSlide,
lazyLoad : 'progressive',
onBeforeChange: beforeSlickChange,
onAfterChange: afterSlickChange
});
onBeforeChange handler:
function beforeSlickChange(slick, currentSlide, nextSlide) {
if(hasVideoBG(currentSlide) === true && isMobile(mobileQuery) === false) {
getSlideVideoByIndex(currentSlide).currentTime = 0;
getSlideVideoByIndex(nextSlide).currentTime = 0;
}
if(hasVideoBG(nextSlide) === true && isMobile(mobileQuery)=== false) {
if(nextSlide === 0) {
$homeSlider.find(".slick-cloned:eq(1) video").get(0).currentTime = 0;
$homeSlider.find(".slick-cloned:eq(1) video").get(0).play();
}
if(nextSlide === (getSliderCount() - 1)) {
$homeSlider.find(".slick-cloned:eq(0) video").get(0).currentTime = 0;
$homeSlider.find(".slick-cloned:eq(0) video").get(0).play();
}
getSlideVideoByIndex(nextSlide).play();
}
}
onAfterChange handler:
function afterSlickChange(slick, currentSlide) {
if(currentSlide === 0) {
var $slideVideo = $homeSlider.find(".slick-cloned:eq(1) video").get(0);
getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
} else if(currentSlide === (getSliderCount - 1)) {
var $slideVideo = $homeSlider.find(".slick-cloned:eq(0) video").get(0);
getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
}
}
Basically I am resetting the currentTime of both the real and cloned slide videos to 0 and playing them before the slide changes. After the slide changes, I'm setting the currentTime property of the real slide to that of the cloned slide. This makes it so that when the cloned slide disappears, the real slide is playing the same video at the same time and the transition is seamless.

Caroufredsel showing partial images

My caroufredsel carousel is showing 8 images at a time and then sliding across the screen to show another 8. However, for the first four times the carousel slides, a partial image on the right shows instead of a complete image. After four slides, the carousel snaps to where it is supposed to be and show all images correctly from then on. Am I doing something wrong? Is there a setting I need to use that I've missed?
Here is the link.
http://dev.mattresstime.co.uk/cheapbeds/mattresstime/index.php
This is the jQuery
$j("#manufacturer_list").carouFredSel({
width:904,
height: 81,
items: {
visible: 8,
minimum: 1,
width: 113,
height: 81
},
scroll: {
pauseOnHover: true
},
swipe: {
onTouch : true,
onMouse : true
},
prev : "#prev_button",
next : "#next_button"
});

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 ;)