| Server IP : 122.155.17.190 / Your IP : 3.149.237.146 Web Server : Apache/2 System : Linux cat17190.thaihostserver.com 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64 User : t1bnc ( 1042) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/t1bnc/domains/t1bnc.ac.th/public_html/slider/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title>Karrot Slider</title>
<meta charset = "UTF-8" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<script src="js/sliderEffects.js"></script>
<script src="js/slider.js"></script>
<style>
body {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#info {
width: 900px;
margin: auto;
margin-bottom: 30px;
color: #434343;
}
#info #logo {
float: right;
width: 100px;
margin-top: -60px;
}
a {
text-decoration: none;
color: #7b7b7b;
}
a:hover {
text-decoration: none;
color: #4d4d4d;
}
</style>
</head>
<body>
<div id="slider" style="width: 900px; height: 505px; margin: auto;">
<img src="images/1.jpg" alt="Imagen Geo Totem" class="sliderImage" >
</div>
<div id="info">
<h1>Karrot Slider</h1>
<img src="images/logo.png" id="logo" >
<p>Karrot Slider a is non-jQuery Slider pure Javascript and CSS. Runs in Internet Explorer 10, Safari, Chrome, Firefox and Opera. Karrot Slider has 8 differents effects and we are working on more. Karrot Slider support responsive image mode, with 100% width, calling <a href="javascript:fullScreen();"><i>fullScreen()</i></a> function. Karrot Slider it's easy to implement on your site.</p>
<p>Contact : <a href="mailto:info@estampworld.com">info@estampworld.com</a></p>
<h2>Download</h2>
<p>Version 1.0 : <a href="https://github.com/estampworld/KarrotSlider">Github</a> </p>
<h2>Configuration</h2>
<p>Include <b>slider.css</b> and <b>sliderEffects.js</b> in your file. </p>
<code>
<link href="css/slider.css" rel="stylesheet" type="text/css" /> <br>
<script src="js/sliderEffects.js"></script>
</code>
<p>Create a div with ID <b>slider</b>, then set its Width and Height. Then, add the first image inside the div.</p>
<code>
<div id="slider" style="width: 900px; height: 505px; margin: auto;"> <br>
<img src="images/1.jpg" > <br>
</div>
</code>
<h2>Usage</h2>
<p>Karrot Slider has 8 differents effects:</p>
<ul>
<li>Dissolve</li>
<li>Slide Up </li>
<li>Slide Down </li>
<li>Slide Left </li>
<li>Slide Right </li>
<li>Mosaic </li>
<li>Window </li>
<li>Doors </li>
</ul>
<p>All effects functions contains 2 parameters, the current image reference and the next image reference. </p>
<code>
<i>//effect(current, next);</i> <br>
KSDissolve("images/1.jpg", "images/2.jpg");<br>
KSSlideUp("images/1.jpg", "images/2.jpg");<br>
KSSlideDown("images/1.jpg", "images/2.jpg");<br>
KSSlideLeft("images/1.jpg", "images/2.jpg");<br>
KSSlideRight("images/1.jpg", "images/2.jpg");<br>
KSMosaic("images/1.jpg", "images/2.jpg");<br>
KSWindows("images/1.jpg", "images/2.jpg");<br>
KSDoors("images/1.jpg", "images/2.jpg");<br>
</code>
<h2>Example</h2>
<p>Create 3 variables. An array of images, image display time as int and the current image integer.</p>
<code>
var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg", "images/4.jpg" ];<br>
var timing = 3000;<br>
var currentImg = 1;<br>
</code>
<p>Create a function that selects the next image, the effect and increment the current image.</p>
<code>
function karrotSlider() { <br>
<br>
var nextimg = (currentImg + 1) > images.length ? 1 : currentImg + 1 ;<br>
var effect = Math.floor (Math.random()*6 +1 ); <br>
<br>
switch (effect) { <br>
case 1: <br>
KSDissolve(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 2: <br>
KSSlideUp(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 3: <br>
KSSlideDown(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 4: <br>
KSSlideLeft(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 5: <br>
KSSlideRight(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 6: <br>
KSMosaic(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 7: <br>
KSWindows(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
case 8: <br>
KSDoors(images[currentImg- 1], images[nextimg- 1]) <br>
break; <br>
} <br>
<br>
currentImg = (currentImg + 1) > images.length ? 1 : currentImg + 1;<br>
<br>
}
</code>
<p>With a time interval call your function.</p>
<code>
setInterval(function () { karrotSlider() } , timing);
</code>
<h2>Donate</h2>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<h2>FAQ</h2>
<ul>
<li>
<p>All images have to be the same size?</p>
<p>Yes :(</p>
</li>
<li>
<p>I want fullscreen? :( </p>
<p>Call the function <a href="javascript:fullScreen();"><i>fullScreen();</i></a> in a script at the <b>end</b> of your html body.</p>
</li>
</ul>
</div>
<script>
//fullScreen () ;
</script>
</body>
</html>