Library used to make scroll-able and draggable image slider? - javascript

I like the way the image slider in this page works and I've been looking for a way to do it. But the information seem to be limited out there.
Site: http://stevenmengin.com/
Thanks

I think you need fullPage.js jQuery Plugin for fullscreen scrolling. You can get it from the link below:
http://alvarotrigo.com/fullPage/

Related

Banner slider for wordpress without plugin

I would like to include banner slider that will fit properly on my site http://wwww.virmodrosti.com index page.
I tried to insert some codes I found on the internet but somehow ruined my entire page.
Question 1: Is jQuery or CSS alone is a better choice for slider?
Question 2: Where can I get easy slider without plugin for my wordpress theme?
I need a slider to be just below the line div id="content" on the main index page. I would like to insert an 1188px wide image because my main wrapper width is 1180px. All I want is a simple slider that has option for aorund 5 posts, that will be manually setup. That's why I ask for a good PHP or HTML code that will work with my wordpress theme.
.
Can you show me a Demo, what kind of slider you want. you can use slider Revolution For a simple slider.
This is a really good basic slider. http://kenwheeler.github.io/slick/
However, if you don't know how to develop your own plugin, then you are going to struggle to figure out how to control the content of the slider. Also if you are using someone elses code, isn't that just the same as using a plugin? Using a plugin means the code will be regularly updated, whereas if you use someone elses static code, then if it breaks you won't know what to do.

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

Incorrect work jquery plugins bxslider with plugin elevatezoom

I'm begginer in programing. I'm trying to use jquery plugins elevatezoom and bxslider. And I have a little problem.
What I have
When I choose one picture from the box, which was created by bxslider plugin, as I understand, the other became invisible, but still exist at the page (in my example at the left top of the page). And when I mouseover this block, the elevate zoomer plugin understand it as a picture for zooming, and start to zoom it. As a result,the page works incorrectly.
Does anyone know how to solve this problem?
I also can give the link to the live project
Maybe you could try to add a class to the active slide object like here and then create an if statement for active slide objects only.

Jquery plugin image scroller with previous and next image visible to side

I am looking for a jquery plugin that has a scrolling image effect where the previous and next images are still visible but smaller on either side of the current image/frame.
Similar to this one: http://www.eogallery.com/ but smoother with the side images centered
I know I have seen it before but I haven't been able to find it after extensive searches.
Anyone know a plugin like that?
Thanks, especially for leading me to the name of the effect "carousel"
I found what I think is the best example here: http://codecanyon.net/item/jquery-carousel-evolution/full_screen_preview/490018
not a plugin but you can see the the source:
http://www.roxon.in/scripts/tutorials/NavGallery_jQuery_Tutorial_01/index5.html
Maybe you can check this one:
http://www.bkosborne.com/jquery-feature-carousel
The plugin has a lot of configuration and options

Jquery based image mosaic wall layouts

I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin

Categories