How to modify parameter of a JS script inside PHP file depending on screen size - wordpress

Question

I have a auto scroll animation that shows featured listings on my homepage. Its displays 5 slides during the animation. Normally for a desktop browser with full screen, it should be fine, however when the screen size is less than 950px width, the slides starts overlapping. The animation scripts is run inside a php file named 'featured.php', it is wordpress site.

I would like to be able to change the parameters depending on screen width size, for example, currently by default it shows 5 ads because of the parameter 'visible: 5' in the script. If small screen i want to change to 'visible: 3' to show 3 ads instead. I will be greatful for your assistance.

featured.php

global $cp_options;
?>

<?php if ( $cp_options->enable_featured ) : ?>

    <script>
        /* featured listings slider */
        jQuery(document).ready(function($) {
            $('div.slider').jCarouselLite({
                btnNext: '.next',
                btnPrev: '.prev',
                autoWidth: true,
                responsive: true,
                pause: true,
                auto: true,
                timeout: 2800,
                speed: 800,
                visible: 5,
                init: function() {
                    $('div.slider').fadeIn();
                },
                easing: 'easeOutQuint' // for different types of easing, see easing.js
            });
        });
    </script>