| Server IP : 118.139.160.155 / Your IP : 216.73.217.153 Web Server : Apache System : Linux sg2plmcpnl504228.prod.sin2.secureserver.net 4.18.0-553.124.4.lve.el8.x86_64 #1 SMP Fri May 15 13:02:13 UTC 2026 x86_64 User : twll3xqyaqrh ( 9725459) PHP Version : 5.6.40 Disable Function : NONE MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/twll3xqyaqrh/public_html/ninja-slider/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title>Demo 7</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="7/ninja-slider.css" rel="stylesheet" type="text/css" />
<script src="7/ninja-slider.js" type="text/javascript"></script>
<style>
body {font: normal 0.9em Arial;margin:0;}
a {color:#1155CC;}
ul li {padding: 10px 0;}
header {display:block;padding:60px 0 10px;background-color:#191919;text-align:center;}
header a {
font-family: sans-serif;
font-size: 24px;
line-height: 24px;
padding: 8px 13px 7px;
color: #4d5256;
text-decoration:none;
transition: color 0.7s;
}
header a.active {
font-weight:bold;
width: 24px;
height: 24px;
padding: 4px;
text-align: center;
display:inline-block;
border-radius: 50%;
background: #4d5256;
color: #191919;
}
</style>
</head>
<body>
<header>
<a href="demo1.html">1</a>
<a href="demo2.html">2</a>
<a href="demo3.html">3</a>
<a href="demo4.html">4</a>
<a href="demo5.html">5</a>
<a href="demo6.html">6</a>
<a href="demo7.html" class="active">7</a>
<a href="demo8.html">8</a>
<a href="demo9.html">9</a>
<a href="demo10.html">10</a>
</header>
<!--start-->
<div id='ninja-slider'>
<div class="slider-inner">
<ul>
<li>
<a class="ns-img" href="img/a_s.jpg" data-fs-image="img/a.jpg"></a>
</li>
<li>
<span class="ns-img" style="background-image:url(img/b_s.jpg);" data-fs-image="img/b.jpg"></span>
</li>
<li>
<a href="/"><img class="ns-img" src="img/c_s.jpg" data-fs-image="img/c.jpg" /></a>
</li>
<li>
<a class="ns-img" href="img/d_s.jpg" data-fs-image="img/d.jpg"></a>
</li>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
<!--end-->
<div style="max-width:700px;margin:90px auto;">
<p>
We can use low resolution images (small size images) for the image slider, and configure the slider to use high resolution
images (large size images) when the slider is enlarged to fullscreen mode.
</p>
<p>
For detailed instructions please visit <a href="http://www.menucool.com/slider/use-high-resolution-images-when-slider-is-fullscreen">Use high resolution images when slider is fullscreen</a>.
</p>
</div>
</body>
</html>