Magento 2. How to change Camera slider dimensions

In this tutorial you will learn how to change slider dimensions in Magento 2.x templates (with Camera Slider).

1. Connect to your server using any FileManager.

2. Open the app/design/frontend/TemplateMonster/themeXXX/web/js/theme.js file using any text editor.

   $('.home_slider').camera({
   height: '47.8%',
   pagination: false,
   loader: 'none',
   time: 5000,
   transPeriod: 1000,
   fx: 'scrollHorz',
   navigationHover: false,
   playPause: false
   });

3. Locate the Home page slider script and change the height value.

4. In order to determine the correct height %, we can use the following formula: images height/images width*100%

   

5. Make changes and re-upload theme.js file to the server.

   

6. Upload your new images to the media\wysiwyg folder on the server.

7. Reload your site to see the changes.

8. Note that you may need to clean your Magento cache to see the changes.

Thank you for taking the time to check this tutorial.

Do you want to see more templates? It’s time to look through our selection of top-quality Magento Themes.

Feel free to check the detailed video tutorial below: