3dcarousel

d jquery carousel


Keywords
3dcarousel, 360-slider, carousel-3d, carousel-plugin, javascript, jquery, jquery-plugin, slider-plugin
License
MIT
Install
npm install 3dcarousel@0.0.3

Documentation

3Dcalrousel


Awesome 3D carousel plugin

Demo

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

CDN

To start working with 3Dcalrousel right away, there's a couple of CDN choices availabile to serve the files as close, and fast as possible to your users:

#####Example using jsDelivr

Just add a link to the css file in your <head>:

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

Then, before your closing <body> tag add:

Contributing

PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.

Html Settings

In 3Dcarousel 1.1 you need to follow this html structure

Example:

<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.