Install

Head tags

<script src="https://unpkg.com/@bananin/bcarousel@latest/js/bCarrusel.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@bananin/bcarousel@latest/css/b-carrusel.css" />

Setting

Inside body tag:

<div id="bCar">               <!-- parent div with an id -->
    <itenes>                       <!-- tag itenes that will contain the carousel items -->
        <div class="item">   <!-- div with class item and inside this what you want to be displayed -->
            <div>1</div>
        </div>
        <div class="item"><div>2</div></div>
        <div class="item"><div>3</div></div>
        <div class="item"><div>4</div></div>
        <div class="item"><div>5</div></div>
        <div class="item"><div>6</div></div>
        <div class="item"><div>7</div></div>
        <div class="item"><div>8</div></div>
        <div class="item"><div>9</div></div>
        <div class="item"><div>n</div></div>
    </itenes>
</div>

Javascript code:

var mCar=new mCarrusel({
    //required
    id:"bCar",              //id that was used in the parent div

    //optional
    margin:10,              //space that will have between items by default 0 (both horizontal and vertical)
    auto:0,                 //time in seconds to automatically go to the next item by default 0 (0 does not play automatically)
    vert:false,             //If the carousel renders vertically; by default false
    vertr: [{m:x,v:true}],  //You can specify specific sizes to make the carousel vertical or horizontal [{m:px minimum container,v:boolean (vertical=true,horizontal=false)}]; by default null ej vertical when screen is more than 800px: [{m:0,v:false},{m:800,v:true}]
    puntos:true,            //the points you have at the bottom as pagination (dots); by default false
    nav:"normal",           //previous and next bottom buttons by default no, "no":no navs, "normal":bottom navs,"centro":horizontal centering,"interno":inside items
    wheel:true,             //if the carousel can be manipulated with the mouse wheel; by default false
    fill:false,             //makes sure to fill the entire container space so no gaps are visible; by default false
    center:true,            //wrap content to be centered (doesn't work if fill is true); defaults to false
    items:2,                //items that are displayed by default in the allocated space
    filas:2,                //rows that the default carousel will have 1 (only applies if the horizontal carousel is shown)
    cercano:{w:300,h:100},  //if you want it to automatically calculate the sizes of the items in width (w) and height (h), for it to work you must not specify anything in responsive
    responsive:[{m:0,i:2},{m:400,i:2},{m:1400,i:3}],//changes according to the space that the carousel has when it is horizontal (not full screen) [{m:px minimum of the container,i:items to show}] by default null
    loop:"rewind",          //loop effect, "no"=when reaching the end you must return manually, "rewind": after the last element returns to the beginning, "loop": creates an infinite loop (BETA)
    autow:true,             //use the best possible size (beta)
    change:cambia           //callback for when the current item changes; by default null
}).refrescar();

function cambia(x){
    console.log("slide "+x);
}

Methods:

//to update the carousel
mCar.refrescar();

//to change it to vertical
mCar.vertical(true);

Code:

Ver en npmjs