WordPress. How to disable parallax effect of the parallax slider

This tutorial shows how to disable parallax effect of the parallax slider for a certain screen resolution in WordPress templates.

WordPress. How to disable parallax effect of the parallax slider

First of all, you need to make sure your slider is a parallax slider. To do that, you need to inspect your slider using an element inspector tool (for example, FireBug or Google Development Tools). If the slider is wrapped in a div element that has a class parallax-slider, it’s our case:

In order to disable the parallax effect, you should perform the following:

1. Choose the screen width that our changes will take effect for. For example, let’s disable the parallax for the screen width 1680px.



2. Open up the wordpress/wp-content/themes/themeXXXXX/style.css file and scroll down to the very bottom. There we will add a media query for our window width 1680px. All code inside that query will work only when the site is viewed on a browser with that particular window width.

   			@media only screen and (width: 1680px) {
   			// our code will go here
   			}
   		

3. Add the following code inside the media query that will disable the parallax animation:

   			@media only screen and (width: 1680px) {
   			.parallax-slider #mainImageHolder {
   			transform: none !important;
   			}
   			}
   		

4. Add the following code that will change the slide image dimensions thus preventing the images from being cut at the top and bottom edges:

   			@media only screen and (width: 1680px) {
   			.parallax-slider-img.obj-inner {
   			background-size: 100% auto !important;
   			}
   			}
   		

5. Add the code that will reduce the height of the slider area since we don’t need it to be so big any more. Before that we need to calculate the height of the slider we need. Let’s figure out the ratio of the slides. To do that we divide the slide image width by its height. In our case it will be 1880 / 807 = 2.33. Then we divide our screen width by the ratio: 1680 / 2.33 = 721px – this is our desired slider height. Let’s compose a rule for it:

   			@media only screen and (width: 1680px) {
   			.parallax-slider {
   			height: 721px !important;
   			}
   			}
   		

6. Save the changes in the wordpress/wp-content/themes/themeXXXXX/style.css file and upload it to the server.

   The result should look like this:

   

Feel free to check the detailed video tutorial below:

WordPress. How to disable parallax effect of the parallax slider