I am after some functionality of part of a development site I am working on.
What I want to achieve is a set of 14 images, aligned horizontally, that constantly scroll horizontally so that they are showing 7 images at a time, and pause when you hover over the slider.
I tried using jQuery Cycle to try and get this functionality but I couldn't get the right parameters included.
Any help would be greatly appreciated.
Try this script. I have not used it but it seems to be what you are looking out for.
http://logicbox.net/jquery/simplyscroll/
Related
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 was wondering if you could help.
I am currently putting together a site that requires a parallax scroll and sticky navigation.
The navigation must start below image 1 (Blue) and then stick to the top in a fixed format after you've scrolled past image 1(blue).
I have tried many options and at present, I have got the navigation to stick to the top and then reappear once image1 (Blue) has been passed - but it starts at the top.
I have tried some jQuery plugins and they have not worked, could it be the way I have got my script formatted? As some is embedded directly into the page and not an external file?
Here is my link: http://bella-web.co.uk/sticky-nav/
and would love some feedback as to how I am going to get this to work.
Thanks in advance,
Ben.
You should be able to add navigation menu that starts in the middle of the page and sticks when it reaches the top using the jQuery plugin jQuery Waypoints, the plugin doesn't just work out of the box, so please read the docs.
I am having two issues with my website code.
Link: http://coding.designzzz.com/demos/bakery-site/
First with my slider right arrow click it will scroll 2 images at a time. I only want it to scroll 1 image at a time.
Second- In Chrome my slider does not work properly. It seems to have some height issue and is not properly visible.
Please give me some suggestions that might help fix my problems.
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 just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.