Tuesday, January 27, 2015

Flexslider Conflict With Parallax Scrolling

Now in designing and its HTML integration we always use some banner slider in home page for describe website details by some slider and it is also make website as attractive view for user.
There are lost of slider user in website but now a days mostly use responsive slider so some website also provide use responsive slider that manage by website view.
On of them is Flexslider which is use in development phase or some HTML integration.
When you work with some open source like Wordpress,Drupal,Magento and when you integrate plugin/extension than in that mostly use Flexslider and its like open source and easy to implement.

What is Parallax Scrolling?

Parallax scrolling is a one type of scrolling technique in website design. In that background image move according to screen move.
Some times if you want to use fixed background image that it is set by CSS but when you want to apply many background image with different content or background image move by scroll down than parallax scrolling is best option.

Some times when you use both  parallax scrolling and Flexslider than scrolling not work in some browser like Chrome,Safari than here is solution.
  • Open "flexslider.css" around line 25: .flexslider .slides > li Comment out or remove -webkit-backface-visibility: hidden; (Find Flexslider.CSS according to open source)
  • In the flexslider initialization script: Specify 'useCSS : false' in your slider options (This is set to true as a default by the flexslider JS and tells the browser to use CSS3 3D transforms if they're available.Also its working without this features)

No comments :

Post a Comment