| Server IP : 103.233.192.212 / Your IP : 18.217.111.22 Web Server : Apache/2 System : Linux sv1.inde.co.th 3.10.0-1160.36.2.el7.x86_64 #1 SMP Wed Jul 21 11:57:15 UTC 2021 x86_64 User : sumpatuan ( 1058) PHP Version : 5.5.38 Disable Function : symlink,shell_exec,exec,proc_close,proc_open,popen,system,dl,putenv,passthru,escapeshellarg,escapeshellcmd,pcntl_exec,proc_get_status,proc_nice,proc_terminate,pclose,ini_alter,virtual,openlog,ini_restore MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/sumpatuan/domains/sumpatuan.go.th/private_html/backup/js/carouFredSel/ |
Upload File : |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="caroufredsel.dev7studios.com" />
<title>carouFredSel: a circular, responsive jQuery carousel</title>
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<!-- optionally include helper plugins -->
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<!-- fire plugin onDocumentReady -->
<script type="text/javascript" language="javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
// Variable number of visible items with variable sizes
$('#foo3').carouFredSel({
width: 360,
height: 'auto',
prev: '#prev3',
next: '#next3',
auto: false
});
// Responsive layout, resizing the items
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
// height: '30%', // optionally resize item-height
visible: {
min: 2,
max: 6
}
}
});
// Fuild layout, centering the items
$('#foo5').carouFredSel({
width: '100%',
scroll: 2
});
});
</script>
<style type="text/css" media="all">
html, body {
padding: 0;
margin: 0;
}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: #333;
}
body {
background-color: #eee;
}
h1 {
font-size: 60px;
}
a, a:link, a:active, a:visited {
color: black;
text-decoration: underline;
}
a:hover {
color: #9E1F63;
}
#intro {
width: 580px;
margin: 0 auto;
}
.wrapper {
background-color: white;
width: 480px;
margin: 40px auto;
padding: 50px;
box-shadow: 0 0 5px #999;
}
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 60px;
width: 360px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 50px;
height: 50px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
</style>
</head>
<body>
<div id="intro">
<h1><a href="http://caroufredsel.dev7studios.com">carouFredSel</a></h1>
<p>This is a demo page, for more examples, the complete documentation, tips & tricks, a support-forum and even a configuration robot, visit <a href="http://caroufredsel.dev7studios.com">caroufredsel.dev7studios.com</a></p>
</div>
<div class="wrapper">
<br />
<p>Basic carousel.</p>
<div class="list_carousel">
<ul id="foo0">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
</div>
<br />
<p>Basic carousel + timer, using CSS-transitions.</p>
<div class="list_carousel">
<ul id="foo1">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
<div id="timer1" class="timer"></div>
</div>
<br />
<p>Carousel scrolled by user interaction.<br />
(prev-button, next-button, pagination, mousewheel and swipe)</p>
<div class="list_carousel">
<ul id="foo2">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
<div id="pager2" class="pager"></div>
</div>
<br />
<p>Carousel with a variable number of visible items with variable sizes.</p>
<div class="list_carousel">
<ul id="foo3">
<li style="width: 50px; height: 50px;">c</li>
<li style="width: 200px; height: 100px;">a</li>
<li style="width: 50px; height: 150px;">r</li>
<li style="width: 50px; height: 200px;">o</li>
<li style="width: 50px; height: 150px;">u</li>
<li style="width: 100px; height: 100px;">F</li>
<li style="width: 250px; height: 50px;">r</li>
<li style="width: 150px; height: 100px;">e</li>
<li style="width: 150px; height: 150px;">d</li>
<li style="width: 50px; height: 200px;">S</li>
<li style="width: 100px; height: 150px;">e</li>
<li style="width: 150px; height: 100px;">l</li>
<li style="width: 200px; height: 50px;"> </li>
</ul>
<div class="clearfix"></div>
<a id="prev3" class="prev" href="#"><</a>
<a id="next3" class="next" href="#">></a>
</div>
</div>
<br />
<p style="text-align: center;">Responsive layout example resizing the items (resize your browser).</p>
<div class="list_carousel responsive">
<ul id="foo4">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
</div>
<br />
<p style="text-align: center;">Responsive layout example centering the items (resize your browser).</p>
<div class="list_carousel responsive" >
<ul id="foo5">
<li style="width: 300px;">c</li>
<li style="width: 150px;">a</li>
<li>r</li>
<li style="width: 300px;">o</li>
<li style="width: 150px;">u</li>
<li>F</li>
<li style="width: 300px;">r</li>
<li style="width: 150px;">e</li>
<li>d</li>
<li style="width: 400px;">S</li>
<li style="width: 150px;">e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
</div>
<br />
<br />
<br />
</body>
</html>