0
Я не могу заставить стрелки на слайдере изображения появляться ... Я попытался изменить позиционирование и отображение, но это не сработало. Так как при установке кода на моей странице индекса меня изменили только одно: удаление «overflow: hidden» на div id «jssor_1»; фактический размер ползунка (ширина: 500 пикселей, высота: 400 пикселей); и скорость вращения каждого слайда ... Код был взят из файла «no-jquery.html». Как вы можете видеть на части «background: url» кода, я уже установил источник в «a02.png».Jssor Image Slider стрелки не отображаются
Я также заметил, что стрелка влево, пока она не видна на слайдере, все еще работает (я могу нависнуть над ней и щелкнуть ее).
Я чувствую, что мне не хватает чего-то простого здесь. HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<!--site navbar-->
<div id="navbar">
<nav>
<ul>
<li><a href="Index.html" class="active" id="active2">Home</a></li>
<li><a href="#">Game News</a></li>
<li><a href="#">Game Reviews</a>
<ul>
<li><a href="#">Xbox 360</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">PS3</a></li>
<li><a href="#">PS4</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Wii</a></li>
</ul>
</li>
<li><a href="ContactUs.html">Contact Us/About Us</a></li>
</ul>
</nav>
</div>
<!--site logo-->
<div id="logo">
<a href="Index.html"><img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home"></a>
</div>
<!--mainbody div-->
<div id="mainbody">
<div id="slider">
<script type="text/javascript" src="C:\Users\Cam\Desktop\NightfallGaming\js\jssor.slider.min.js" async></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
[{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}],
[{b:0.0,d:600.0,x:410.0,e:{x:27.0}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,o:1.0,e:{o:5.0}}],
[{b:-1.0,d:1.0,c:{x:175.0,t:-175.0}},{b:0.0,d:800.0,c:{x:-175.0,t:175.0},e:{c:{x:7.0,t:7.0}}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,x:-570.0,o:1.0,e:{x:6.0}}],
[{b:-1.0,d:1.0,o:-1.0,r:-180.0},{b:0.0,d:800.0,o:1.0,r:180.0,e:{r:7.0}}],
[{b:0.0,d:1000.0,y:80.0,e:{y:24.0}},{b:1000.0,d:1100.0,x:570.0,y:170.0,o:-1.0,r:30.0,sX:9.0,sY:9.0,e:{x:2.0,y:6.0,r:1.0,sX:5.0,sY:5.0}}],
[{b:2000.0,d:600.0,rY:30.0}],
[{b:0.0,d:500.0,x:-105.0},{b:500.0,d:500.0,x:230.0},{b:1000.0,d:500.0,y:-120.0},{b:1500.0,d:500.0,x:-70.0,y:120.0},{b:2600.0,d:500.0,y:-80.0},{b:3100.0,d:900.0,y:160.0,e:{y:24.0}}],
[{b:0.0,d:1000.0,o:-0.4,rX:2.0,rY:1.0},{b:1000.0,d:1000.0,rY:1.0},{b:2000.0,d:1000.0,rX:-1.0},{b:3000.0,d:1000.0,rY:-1.0},{b:4000.0,d:1000.0,o:0.4,rX:-1.0,rY:-1.0}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 4000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('C:\Users\Cam\Desktop\NightfallGaming\img\a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 228px; left: -180px; width: 500px; height: 400px;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative;
: 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\001.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/007.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\003.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/004.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/005.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/006.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/009.jpg" />
</div>
<div data-b="0" data-p="112.50" style="display: none;">
<img data-u="image" src="img/008.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/010.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:-8px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
<script>
jssor_1_slider_init();
</script>
</div>
</div>
</body>
</html>
У меня есть на моем локальном HTML-файл, но часть, которую я отступом, является лишь небольшой частью кода. Стрелки находятся внутри контейнера слайдера. – Cam
Можете ли вы опубликовать час html-кода, пожалуйста, –
Отредактируйте его, чтобы включить весь код. – Cam