<div class="gallery">
<div class="ul_overflow">
<ul>
<li class="item_1"><h2>1</h2></li>
<li class="item_2"><h2>2</h2></li>
<li class="item_3"><h2>3</h2></li>
<li class="item_4"><h2>4</h2></li>
<li class="item_5"><h2>5</h2></li>
<li class="item_6"><h2>6</h2></li>
<li class="item_7"><h2>7</h2></li>
<li class="item_8"><h2>8</h2></li>
<li class="item_9"><h2>9</h2></li>
<li class="item_10"><h2>10</h2></li>
</ul>
</div>
</div>
.gallery{
width: 100%;
height:100px;
overflow:hidden;
}
.ul_overflow{
position:relative;
width:90%;
height:100%;
overflow:hidden;
margin:0 auto;
}
.gallery ul{
position:relative;
height:100%;
width:100%;
margin:0;
padding:0;
}
.gallery ul.animate{
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
transition: transform 0.5s ease;
}
.gallery ul li{
overflow:hidden;
width:100%;
height:100%;
position:absolute;
}
.gallery ul li h2{
position: absolute;
top:0;
bottom:0;
left:10px;
right:10px;
background: white;
margin:0;
color:cadetblue;
text-align: center;
line-height: 100px;
}
CenterActiveGallery = new SwipeGallery({selector: $('.center_active')})
CenterActiveLoopGallery = new SwipeGallery({selector: $('.center_active_loop'), loop: true})
.gallery ul li{
width:30%;
}
gallery3 = new SwipeGallery({selector: $('.gallery3'), loop: true, positionActive: 'center', elementsOnSide:4})