Slider doesn’t work on iOS Devices when Previewed in Portfolio

When you use a slider on your website and display it with the portfolio. You might face issue with a slider when previewed with the portfolio on iOS devices.

Why does this happen?

Mostly, a slick library is used to display a slider/carousel. The slick library contains CSS and JS needed for the slider to work. This library has an issue with iOS devices. Here is a GitHub link for the same issue.

So when you click on the Quick View button on the website portfolio, the website opens in the iframe. If that site has used a slider/ carousel then it breaks the markup of the website in iframe only on iOS devices.

How to fix?

To fix this issue you need to add custom code on the website. Note that you need to add this code specifically to the website that is displaying as a portfolio and uses a slider. No need add this code to the main site where you are displaying all portfolios.

Code Snippet can be found on GitHub on a link here. Paste the code to the child theme’s functions.php file.