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
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.
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)?
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.
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/
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.