I'm trying to make a slider with skewed slides.
Link to codepen
On scroll I'm adding active class to each slide but only two slides - 3 and 4 actually show up, 1 and 2 are not.
If you scroll you can actually see image from 2 slide show up briefly at the top of the left part.
Class is added as expected to every slide as far as I can see.
If I comment out 3 and 4 it works with 1 and 2 the same way.
I'm not sure if the problem may be somewhere in CSS styles? All the help will be much appreciated.
You have your states backwards. When the slide is "active", it is actually moved off-screen. So all of the inactive slides are stacked in the view, allowing you to only see number 4. Unless number 4 is the active slide, in which case slide 3 shows through.
Swap your transforms around between default and active states.
Related
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.
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.
Has anyone been able to get infitite scrolling working using Unslider?
http://unslider.com/
Apparently, the dev branch on github has code that include infinite scroll (where the scroller always scrolls to the left and doesnt jump back to slide 1), but I cant get this to work at all.
When I incorporate the code from github, it works for the infinite scroll, but it breaks the pagination dots.
Dots show, but are all out of order.
I currently have 5 slides:
On first load, slide 1 and dot 1 is active
On slide 2, dot 3 is active
On slide 3, dot 4 is active
On slide 4, dot 5 is active
On slide 5, dot 5 is active
After repeat, on slide 1, dot 5 is active.
Anyone know of any working examples online? I have searched but cant find any - anyone asking this question just gets referred back to github again.
I have also opened an issue on github for this, but if anyone knows of a working example, that would be useful to see.
I have managed to knock something together by adding a check on what image is currently active, and then forcing the visible dot index to the correct position with a few 'if' statements, and this works ok.
Until an 'official' answer / fix is released for this, if anyone else wants to see a fully working infinite scroll slider example based on the unslider code, then I will provide a link to my working example.
I am using JQuery slide for showing some div's on my website.
Users have a previous and next button to navigate.
Lets say I have 4 slides on the slideshow.
By default, hitting previous when I'm at the first slide will take me to slide 4, and hitting next on slide 4 will take me to slide 1.
How can I stop this behaviour and put a stop point and each end of the slideshow?
Plugin documentation is here, sadly my skill at this point doesn't let me do much about it though.