Slider funktioniert nicht mehr

Question

Wir haben einen Slider auf unserer Website, der seit zweieinhalb Jahren funktioniert und auf einmal in Chrome nicht mehr funktioniert. Es ist derselbe Schieberegler für mehrere Seiten und funktioniert auf keiner dieser Seiten mehr.

Wenn Sie einen Retina Bildschirm haben, wird es einen anderen Schieberegler geben, der immer noch funktioniert. Hier

ist ein Link zu einer der Seiten mit dem Schieber: http://agentboris.com/listings/20-scrivener-417.php

Die jquery Datei, die wir verwendet haben aufgerufen: jquery-1.11.2.min.js

HTML :

<div id="container" class="hidephone" style="position: relative" > 
    <img src="../sold.gif" height="45" width="113" class="sold" /> 
<ul> 
<li><img src="images/5-westgrove/1.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/2.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/3.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/4.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/5.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/6.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/7.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/8.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/9.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/10.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/11.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/12.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/13.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/14.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/15.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/16.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/17.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/18.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/19.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/20.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/21.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/22.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/23.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/24.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/25.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/26.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/27.jpg" class="round" width="1000" height="550" /></li> 
    <li><img src="images/5-westgrove/28.jpg" class="round" width="1000" height="550" /></li> 
    </ul> 
<span class="button prevButton"></span> 
<span class="button nextButton"></span> 

</div> 

ON PAGE JAVASCRIPT:

$(window).load(function(){ 
var pages = $('#container li'), current=0; 
var currentPage,nextPage; 
var timeoutID; 
var buttonClicked=0; 

var handler1=function(){ 
buttonClicked=1; 
$('#container .button').unbind('click'); 
currentPage= pages.eq(current); 
if($(this).hasClass('prevButton')) 
{ 
if (current <= 0) 
current=pages.length-1; 
else 
current=current-1; 
} 
else 
{ 

if (current >= pages.length-1) 
current=0; 
else 
current=current+1; 
} 
nextPage = pages.eq(current); 
currentPage.fadeTo('slow',0.3,function(){ 
nextPage.fadeIn('slow',function(){ 
nextPage.css("opacity",1); 
currentPage.hide(); 
currentPage.css("opacity",1); 
$('#container .button').bind('click',handler1); 
}); 
}); 
} 

var handler2=function(){ 
if (buttonClicked==0) 
{ 
$('#container .button').unbind('click'); 
currentPage= pages.eq(current); 
if (current >= pages.length-1) 
current=0; 
else 
current=current+1; 
nextPage = pages.eq(current); 
currentPage.fadeTo('slow',0.3,function(){ 
nextPage.fadeIn('slow',function(){ 
nextPage.css("opacity",1); 
currentPage.hide(); 
currentPage.css("opacity",1); 
$('#container .button').bind('click',handler1); 
}); 
}); 
timeoutID=setTimeout(function(){ 
handler2(); 
}, 8000); 
} 
} 

$('#container .button').click(function(){ 
clearTimeout(timeoutID); 
handler1(); 
}); 

timeoutID=setTimeout(function(){ 
handler2(); 
}, 8000); 

CSS:

#container{ 
width:1000px; 
height:550px; 
position:relative; 
padding: 0; 
margin: 0; 
left: 0; 
top:0; 
} 

#container ul{ 
width:1000px; 
height:550px; 
list-style:none outside none; 
position:relative; 
overflow:hidden; 
padding: 0; 
margin: 0; 
list-style:none; 
} 


#container li:first-child{ 
display:list-item; 
position:absolute; 
padding: 0; 
margin: 0; 
} 

#container li{ 
position:absolute; 
display:none; 
padding: 0; 
margin: 0; 
} 


#container .prevButton{ 
height:72px; 
width:68px; 
position:absolute; 
background: url('buttons.png') no-repeat; 
top:515px; 
margin-top:-36px; 
cursor:pointer; 
z-index:60; 
background-position:left top; 
left:0 
} 

#container .prevButton:hover{ 
background-position:left bottom;left:0;} 
#container .nextButton{ 
height:72px; 
width:68px; 
position:absolute; 
background: url('buttons.png') no-repeat; 
top:515px; 
margin-top:-36px; 
cursor:pointer; 
z-index:60; 
background-position:right top; 
right:0 
} 

#container .nextButton:hover{ 
background-position:right bottom;right:0;} 

Answer 1

fand ich heraus, was das Problem war.

Wir hatten unsere Website mit Cloudflare verbunden und der gesamte Datenverkehr wurde gefiltert. Als ich Cloudflare deaktiviert habe, haben unsere Slider wieder angefangen zu arbeiten.