Search code examples
jqueryjquery-uijcarousel

jquery slider is not working properly in Chrome


Here is a live demo: http://sp.smartclientdemo.com/index.php/portfolio?id=commercial

The problem can be seen by clicking on the last thumbnail. In Chrome the gap is coming between the thumbnail and navigational arrows. It working fine with Firefox. The carousel is contained inside this <ul>:

<ul id="pikame" class="pika-thumbs jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: -315px; margin: 0px; padding: 0px; width: 1155px;">

Clicking on other thumbnails, for example ones to the left, are working properly in Chrome and the carousel is behaving inconsistently. Here is a screenshot of the problem.

Could you please give me suggestion how to solve problem in chrome.

Thanks, Animesh


Solution

  • Here is a complete demo using your resources that works but with all the extra libraries removed. It works as expected in Chrome 13 and Firefox 4.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>portfolio | S.P</title>
        <script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>
        <script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery.pikachoose.js"></script>
        <link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/bottom.css" type="text/css" rel="stylesheet" />
        <link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/style1.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">
            $(function() {
                $('#pikame').PikaChoose({carousel:true});
                $('<div class="slide-top"></div>').insertBefore('.pika-stage');
                $('<div class="slide-bottom"></div>').insertAfter('.pika-stage');
            });
        </script>
    </head>
    <body>
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="#" ><img src="http://sp.smartclientdemo.com/uploads/files/93270001.JPG" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car8.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car1.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car2.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car4.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car5.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car3.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car7.jpg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car9.jpeg" alt=""/></a><span></span></li>
        <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car10.jpeg" alt=""/></a><span></span></li>
    </ul>
    <div class="portfolioright">
        <div class="pikachoose"></div>
    </div>
    </body>
    </html>
    

    Note: It is not a completely valid demo, due to the markup in the JavaScript; but it's close enough.