dealing pixel rounding for stacked responsive slider - javascript

I am working on a slider that is 10 sliders stacked on each other to make a whole picture. Every two seconds a random slice will slide left or right and if the slider is clicked it will move all the sliders to the same slide to make a whole picture.
Because the sliders are responsive I am having an issue with sub pixel rounding. As you resize the page or scroll you can occasionally get a white space between the different slides.
Is there A way I can remove this?

Related

Owl Carousel - Scrolling by a certain distance

Is it possible to make the carousel scroll to a certain distance? Eg, if I click on the current image on the carousel and drag it right by 1cm, then that current image moves lefts by 1cm only.
From the demo here:
https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html it seems that when you scroll, the next image is snapped to the centre of the carousel. I don't see any relevant functions in the API.

How to re-slick with expandable slides

I have created a slick slider that contains expandable slides. A slide contains and image and a div with some text in it.
The div has a width of 0, and when clicking on the image the div expands. The slider fits 9 slides before arrows/dots are needed, i.e. slidesToShow is set to 9.
If I do not However, when the slide expands, the slides at the end are no longer visible and arrows are required.
I tried playing with a few different settings but nothing seems to work. I thought setPosition might do it, but no luck.
What is the best way to detect when the slides are no longer fully visible within the slider, and how would I get the arrows to appear in this situation and disappear when the slides are collapsed (i.e. they are all visible within the slider)?

Fullpage.js by Scrolling down scroll horizontally and on one Section go down after finishing scrol horizontal again?

With Fullpage.js i would like to only use Scrolling down to navigate to next page which is horizontally. On one Page I would like to go down a few slides, navigate vertically. After these are finished I would like to go to next slide which is horizontally again.
I got it working when my Slide which is going to scroll vertically is the last slide. But cannot get it to work when it's in the middle of the slides.
I made a picture to show what i mean:
Your approach is not the right one.
The image should look like this instead:
That is, 3 vertical sections.
The fist and last sections with with 2 horizontal slides each.
This way you will only need to make use of the fullPage.js extension called Scroll Horizontally and you'll have exactly what you want.
Scroll down from 1 will lead to 2.
Scroll down from 2 will lead to 3.
Scroll down from 3 will lead to 4.
Scroll down from 4 will lead to 5.

Vertical And Horizontal range slider

Is there any jquery or maybe clear html5 range slider with one point that can go vertically and horizontally with two values? Something like this:
there are vertical or horizontal sliders, but a slider that does both, i don't know !
You could display 2 sliders at the bottom and the right, and then according the value of the 2 sliders it will move or show/hide the white point in the good place in your grid...
This library for instance will allow you to do this : http://rangeslider.js.org/

JSSOR slider - using $Align on thumbnails slides on different direction

I am using the JSSOR slider to show 4 items like a gallery (as in the http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html example). Only difference is that I use $Lanes: 1 and $Cols: 3.
The idea is to show 1 item in the main area and 3 on the thumbnails area. It all works perfectly well.
However, I want these 3 "thumbnails" to be all the remaining except the one being shown in the main area. To do that, I set a value in $Align (for example, 100) but from a certain value on, the thumbnails stop moving bottom to up and start moving up to bottom. How do I keep the "direction" in which the thumbnails move? The indexes are all correct and the click takes the slider to the correct position but I really didnt want the thumbnails to move differently just by using the $Align.

Categories