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. !
Related
Here is what I am talking about:
When you visit https://soundcloud.com/ , when you look at the homepage you see the whole "Connect on Soundcloud" thing.
The texts and buttons on the screen in that confined space scrolls by itself in a given amount of time. It also has those two small white circle buttons that tell you which item it is on(the first white circle gets filled in while the other one is hollowed out with a border when the user is looking at "Connect on SoundCloud" and the other way around when it is on "Discover more with SoundCloud GO+").
How is this made?
Thank you!
You should take a look at Carousels on w3schools, they cover this pretty well.
Bootstrap brings functions and html attributes for building components that slide though elements. Elements not currently visible are pushed off the view with CSS and visible ones can slide into view.
That is called carousel, and it is part of many frameworks/libraries like Bootstap. Some frameworks/libraries call it gallery.
I'm trying to make a webpage that scrolls horizontally using fullpage.js.
I have the divs set-up and it works perfectly when I click the dot menu or use my keyboard to control it. Now I need it to work with scrolling.
So When I scroll down, I want to go to my 2nd div anchor point (just like it does when I press my right arrow key).
Is this possible in anyway? So far I only found this example but does that mean I have to pay incase I want this functionality or am I missing something?
Just set:
scrollHorizontally: true
In your instantiate function.
You can find all the available properties for fullpage here:
https://github.com/alvarotrigo/fullPage.js#fullpagejs
Edit: updated answer. Misread question.
I am using this popular carousel (http://kenwheeler.github.io/slick/).
I have placed certain elements inside each slide. At least one of these elements must be selected by the user before moving to the next slide. But I cannot figure out how to prevent the user from manually moving to next slide by clicking the 'next' arrow before selecting an element.
I know that 'next/previous' arrows can be disabled but I do not want to do that as the user might want to go back to previous slide to change his option.
I know that one option is to disable default arrows and introduce my own prev/next arrows and then bind slide changing functionality to it along with condition checking. But it would be great if there is some built-in option in this slider (which I am not able to figure out) as it would minimize my effort.
I made a quick modified version of Slick that allows for condition checking when going next, see: http://jsfiddle.net/alan0xd7/dhxhv5gg/
Basically the slider will only go to next if fnCanGoNext returns true.
I've only actually added one line around line #700 on the fiddle. It doesn't handle things like clicking on "previous" when on first slide, but you can probably work from here.
Since Slick is an open source project, don't be afraid to change the code and adapt it to suit your needs. It is fun to see how things work behind the scenes.
Hope this helps!
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