jascarousel
Version:
jQuery plugin that lets you create beautiful responsive 3D carousel slider.
164 lines (151 loc) • 6.21 kB
HTML
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134968642-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-134968642-1');
</script>
<title>jasCarousel | 3D carousel</title>
<meta charset="utf-8">
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="3D carousel, 3d slider, jquery carousel, carousel, jquery carousel plugin, carousel slider">
<meta name="description" content="jQuery plugin that lets you create beautiful responsive 3D carousel slider.">
<meta name="author" content="Parth Jasani">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jas-carousel.css">
<link rel="stylesheet" href="css/default.min.css">
<link rel="stylesheet" href="css/github.css">
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<script src="js/jas-carousel.js"></script>
<script src="js/highlight.pack.js"></script>
</head>
<body>
<main>
<header>
<div class="header_inner">
<h1 class="logo">
<a href="https://jascarousel.github.io/jascarousel/" title="jas-carouse">
<img src="img/jas-carousel-logo.png" alt="jas-carousel-logo">
</a>
</h1>
<nav>
<a href="examples.html">Examples</a>
<a href="options.html">Options</a>
<a href="https://github.com/jasCarousel/jascarousel">Github</a>
<a href="./jasCarousel.zip" download>Download</a>
</nav>
</div>
</header>
<div class="container cf">
<div class="slider-main">
<div class="parth">
<img src="img/parth.png" alt="parth">
</div>
<ul class="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
</div>
<h2>jQuery plugin that lets you create a beautiful responsive 3D carousel slider</h2>
<div class="usage">
<div class="container cf">
<h3>Installation</h3>
<pre>
<code class="html">
<link rel="stylesheet" type="text/css" href="https://jascarousel.github.io/jascarousel/css/jas-carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://jascarousel.github.io/jascarousel/js/jas-carousel.js"></script>
</code>
</pre>
<h3>HTML Structure</h3>
<pre>
<code>
<ul class="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</code>
</pre>
<h3>Usage</h3>
<pre>
<code>
$(".slider").jasCarousel({
margin: 20,
auto: false,
speed: 800,
delay: 2000,
prevText:'Prev',
nextText:'Next'
})
</code>
</pre>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://jascarousel.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
</main>
<footer>
<p>Released under the <a href="https://opensource.org/licenses/MIT">MIT License</a></p>
<p>Copyright © 2019 jasCarosuel | Developed with ♥ by <a href="http://jasaniweb.com" target="_blank">Parth</a></p>
</footer>
</body>
<script>
$(document).ready(function() {
$(".slider").jasCarousel({
margin: 20,
auto: false,
speed: 800,
delay: 2000,
slideFrontFace: false,
moveOnSlideClick: true,
prevText:'<img src="./img/jas-carousel-arrow-prev.png">',
nextText:'<img src="./img/jas-carousel-arrow-next.png">'
})
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
})
</script>
</html>