CODEWITHSUNDEEP
javascriptcssgoogle-chrome
Billy Bru
Billy Bru

Reputation: 73

jssor slider images not displaying properly in chrome browser

I have successfully implemented jssor slider on our website for more than a year (and love it!). Yesterday (9/3/15), my Chrome browser updated, and the slider on our website now does not function properly. (It still works fine using IE and Firefox.) The images show briefly, then the space goes blank, then show again at transition, then blank. I use the slider images as links, which do not work when the image is not showing.

I found a similar situation with a solution at: Jssor slider does not display slides in Chrome -- But the recommended solution (changing the style: position code from absolute to relative) is already done correctly in my code.

I'm not sure if it could be CSS or javascript issue. Has anyone else seen this problem?

Upvotes: 7

Views: 2538

Answers (8)

Iscarly
Iscarly

Reputation: 1

solution: download full pack .. in demos-jquery folder, select and take the banner code that apear like yours.

replace on new code to match your old configuration values. 

$FillMode: 2, ...
$AutoPlay: true, ...
$AutoPlayInterval: 4000, ...
$PauseOnHover: 1, ...
$ArrowKeyNavigation: true, ....

now replace IMG URLs

<img u="image" src="../img/1920/red.jpg" /> ... TO YOUR URL IMAGES

REPLACE RESPOSIBLE CODE to THIS ONE if not responsible well..

//responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$SetScaleWidth(parentWidth);          //parentWidth
            else
                window.setTimeout(ScaleSlider, 30);
        }

        //Scale slider immediately
        ScaleSlider();

        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $(window).bind('resize', ScaleSlider);
        }
        //responsive code end

THAT's ALL To see its workin: http://www.iscarly.com

Upvotes: 0

Tony_GR
Tony_GR

Reputation: 81

The bug appears to be with hardware acceleration. Simple solution is to set the following option in your jssor options (this defaults to true so may not be there already)

$HWA: false,

Author of jssor says he will remove HWA in v20

Upvotes: 1

Richard Ndagijimana
Richard Ndagijimana

Reputation: 1

Resolved this issue by replacing jssor.slider.mini.js file with the latest one. Just download the latest

Upvotes: 0

David Lee
David Lee

Reputation: 1

I solved this problem.

a tag is the main issue. And you can put the code onclick=window.open("/","_self" instead of

my site is working well now

Upvotes: 0

Zoran Kocev
Zoran Kocev

Reputation: 1

or just remove u="image" code from 'a' tag

Upvotes: 0

Zoran Kocev
Zoran Kocev

Reputation: 1

Try add the same style from image tag in 'a' tag

<a style="position: absolute; top: 0px; left: 0px; width: 600px;" href="nov-izgled-na-avto-magazin.nspx">
...
<img u="image" src="content/images/2015/08 avgust/www.avtomagazin.com.mk +.png" style="position: absolute; top: 12px; left: 348px; width: 600px;" />
 </a>

In some cases adding the code style="position: absolute;" in both image and 'a' tags will be enough

Upvotes: 0

Aaron Williams
Aaron Williams

Reputation: 118

Updating the jssor slider to the current version (19.0) helped resolve my problem that happened when Chrome updated to version 45. Hopefully the same will work for you.

Upvotes: 5

George Hartas
George Hartas

Reputation: 21

When I added the code to the image tag, it still didn't work. But when I added it to the 'a' tag (I link the slides), then it worked. Give it a try. See www.cyedc.org for my site.

<a href="/pdf/pink-october-and-open-house.pdf" target="_blank" u="image" style="position: relative;">
<img src="/images/slider-image-pink-october.jpg" /></a>

Upvotes: 1

Related Questions