0

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.

enter image description here enter image description here

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>
Ibrahim Timimi
  • 2,656
  • 5
  • 19
  • 31
  • 1
    Please show us what you have tried and what's not working. – Spartacus Oct 31 '17 at 20:43
  • 1
    You can't get the screen size from PHP, this is a client side thing so PHP has nothing to do with your issue in this case – Alon Eitan Oct 31 '17 at 20:45
  • $Alon Eitan, you are right, i'm not familiar with php and js thats why i posted this, i will read the post you submitted. Thank you. – Ibrahim Timimi Oct 31 '17 at 20:47
  • Add to your JS script some code to check the width of the screen and calculate dynamically how many elements can be displayed at the same time... because that can only be achieved in client side... change the `visible` parameter accordingly. – DIEGO CARRASCAL Oct 31 '17 at 20:48
  • $DIEGO CARRASCAL, yes i got a clue now when i read the other post. i will change my js script. Thanks – Ibrahim Timimi Oct 31 '17 at 20:51

0 Answers0