3dcarousel 中文文档教程

Question

3Dcalrousel

---

很棒的 3D 轮播插件

Demo

https://websoldire.github.io/3Dcalrousel/

CDN

开始使用马上 3Dcalrousel，有几个可用的 CDN 选择 尽可能快地为您的用户提供文件：

• https://websoldire.github.io/3Dcalrousel/jquery.newCarousel.1.1.js
• https://websoldire.github.io/3Dcalrousel/jquery.newCarousel.css

Example using jsDelivr

只需在 中添加指向 css 文件的链接：

<link rel="stylesheet" type="text/css" href="newCarousel.css">
<script src="jquery.touchSwipe.min.js"></script>
<script src="jquery.newCarousel.1.1.js"></script>

然后，在您关闭 < /code> 标签添加：

Contributing

请在请求功能、提交拉取请求或提交问题之前查看 CONTRIBUTING.markdown。

Html Settings

在 3Dcarousel 1.1 中，您需要遵循以下 html 结构

示例：

<div class="container">
    <div class="box">
        <figure><div class="one">1</div></figure>
        <figure><div class="two">2</div></figure>
        <figure><div class="three">3</div></figure>
        <figure><div class="four">4</div></figure>
        <figure><div class="five">5</div></figure>
        <figure><div class="six">6</div></figure>
        <figure><div class="six">7</div></figure>
        <figure><div class="six">8</div></figure>
        <figure><div class="six">9</div></figure>
        <figure><div class="six">10</div></figure>
        <figure><div class="six">11</div></figure>
        <figure><div class="six">12</div></figure>
        <figure><div class="six">13</div></figure>
        <figure><div class="six">14</div></figure>
    </div>
</div>

JavaScript setting and default options

    $(".container").carousel({
        timer:1500,
        auto:true,
        navigation:true,
        prevText:"prev",
        nextText:"next",
        swipe:true,
        infiniteLoop:true,
        axes:"y",
        margin:0 
    });

Options

Name	default	description
auto	true	3Dcarousel will auto play with this option
timer	1500	Interval between slide change
navigation	true	To genrate navigation button in 3Dcarousel
prevText	"prev"	Add text into prev button
nextText	"next"	Add text into next button
swipe	true	Enable or desable swipe functionality
infiniteLoop	true	3Dcarousel will rotate infinite if this option is true
zIndex	-100	The z-index value of the fixed-position elements. By default these will be behind everything else on the page.
axes	"x"	if set value "x" it will genrate horizonral carousel. And "y" will ganrate vartical carousel
margin	0	Margin between each slide.