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.
Related
I probably need a step in the right direction as I'm not sure if this is a CSS transition issue or a Jquery issue.
I'm trying to implement the carousel listed here:
https://www.codeply.com/go/XPajZsz60p/bootstrap-4-responsive-carousel-4-slides-slide-one
But when I tried to implement it (see half way down the page under Recent Clients) and try to slide right, it does not have a smooth transition. The slide left works perfectly.
http://www.fordengineering.ca
When I slide right, the new icon appears almost immediately and covers over the whole slide.
Is this because I should be doing this on the bs.slid.carousel function instead of the bs.slide.carousel function in JQuery? Or is this because of a CSS issue?
I'm working with fullPage.js, an amazing scrolling framework.
I need to have the site working like this:
As you can see in the .jpg when the site loads and people click or scroll to the right using the slideshow, there are 4 slides there, when they catch the last one users can only go down. No other behavior is allow.
Now I have this working just for the horizontal line, in the following way:
People can not go back because there is no previous button.
When people get to the last horizontal slide the next button navigation disappear.
Now I need to create another section down and I need that one just works on the last slide numbered as 4 in the jpg. Not allow to pass there in the slide 1, 2 or 3.
Any ideas? How can I do that?
You could disallow the vertical scrolling until the user reach the last slide.
You could use the functions setAllowScrolling and setKeyboardScrolling provided by the plugin together with a callback such as 'afterSlideLoad'.
Thank you so much for reply. I found a solution changing the framework and working with Parallaxjs.
http://stolksdorf.github.io/Parallaxjs/
Very versatile for this purpose. !
I am using this jQuery plugin on a website: http://stolksdorf.github.com/Parallaxjs/
I am trying to achieve an effect where when a slide is navigated to, it automatically moves onto another slide once it has loaded - think of it as a transition slide.
For example:
parallax.transition.onload=function(){
parallax.citymid.show();
};
This code shows the city mid slide once the transition slide has loaded.
However:
parallax.transition.onload=function(){
parallax.citymid.bottom();
};
This does not make city mid slide in from the bottom as it would if it was called from a button.
Does anyone know whow I can make this work, or at least find a work around for it? I have contacted the developer of the plugin but to no avail.
Many thanks,
Oli
Using transition callbacks, everything works as it should.
parallax.pageB.right(function(){
parallax.pageC.right();
});
Call this bit of code while on pageA and it will slide in pageB from the right, and as soon as it's done it will slide in pageC. I've tested this and it works flawlessly.
Apparently, the demo page on the http://twitter.github.com/bootstrap/javascript.html#carousel seems to have carousel stop rotating after it reaches the right most picture in the slide.
The demo used $('#myCarousel').carousel() to start carousel.
I tried
$('#myCarousel').carousel()
and
$('#myCarousel').carousel('cycle')
but carousel kept stopping when it reaches to the last picture.
I have seen some posts on the web that people actually want to stop it from cycling forever, which was posted like 3 weeks ago.
http://groups.google.com/group/twitter-bootstrap/browse_thread/thread/9eeedbb0e68789e3/bf99468117bd669a
What should I do so that my carousel will continue rotating after it reaches the last picture?
This is actually a bug that has been fixed in 2.0.2
You can try deleting line 86 in bootstrap-carousel.js which is,
if (!$next.length) return
See: issue 2036
We created an infinite jquery scroller for our corporate site. Our approach was, as each image was scrolled off of the screen we'd clone it, append the clone to the opposite side, and remove the one that just left the viewable area.
try this.
$('.carousel').carousel()
It's literally from the bootstrap site. Makes no sense to me that this would not be instance specific. But there is some room for improvement in the doc anyway.
i am working on a site that scrolls horizontally. before i put the jquery scroll.to plugin in, i have some work that needs to be ironed out with the anchors.
you can see in the example, when you click to go to box 2, it doesn't go to the right location. then when you click back to box 1 or home, it's placed the content flush to the left side.
this is very similar to a previous question, but it's not answered.
You can see this. This is working great. You can see the source code and try. It is using jquery plugin to smooth scroll.
SEE THIS