onbiponi Carousel

Add class name as ob-carousel, ob-carousel-item, ob-left, ob-right
Plugin with html is below:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
border:0;
}
.ob-carousel {
width: 100%;
height:150px;
margin: 0;
padding: 0;
border:0;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
position:relative;
margin:0;
padding:0;
font-size:0;
}

.ob-carousel .ob-carousel-item {
font-size:16px;
width: 150px;
background-color: red;
display:inline-block;
min-height:100%;
position:relative;
left:0;
-webkit-transition: all 0.4s linear; /* Safari */
transition: all 0.4s linear;
margin:0;
padding:0;
border:0;
}
/*
.ob-carousel .ob-carousel-item:nth-child(even) {
background-color: blue;
}
*/
.ob-left, .ob-right {
position:absolute;
top:50%;
transform:translateY(-50%);
text-decoration:none;
color:#FFF;
text-shadow: 0 0 3px #000;
font-size:32px;
height:32px;
line-height:32px;
padding:4px 8px;
background:#AAA5;
display:block;
opacity:0.6;
}
.ob-left:hover, .ob-right:hover {
opacity:1;
color:#FFF;
}
.ob-left {
left:0;
}
.ob-right {
right:0;
}
</style>
</head>
<body>
<div class=”ob-carousel”>
<div class=”ob-carousel-item”>Box #1</div>
<div class=”ob-carousel-item”>Box #2</div>
<div class=”ob-carousel-item”>Box #3</div>
<div class=”ob-carousel-item”>Box #4</div>
<div class=”ob-carousel-item”>Box #5</div>
<div class=”ob-carousel-item”>Box #6</div>
<div class=”ob-carousel-item”>Box #7</div>
<div class=”ob-carousel-item”>Box #8</div>
<div class=”ob-carousel-item”>Box #9</div>
<div class=”ob-carousel-item”>Box #10</div>
<div class=”ob-carousel-item”>Box #11</div>
<div class=”ob-carousel-item”>Box #12</div>
</div>
<a class=”ob-left” href=”#”><</a>
<a class=”ob-right” href=”#”>></a>
<script>

(function() {
var item = 3;
var counter = 0;
var elements = document.querySelectorAll(“.ob-carousel .ob-carousel-item”);
for(let i=0; i<elements.length; i++) {
elements[i].style.width = 100/item+’%’;
elements[i].parentElement.parentElement.style.margin = ‘0’;
elements[i].parentElement.parentElement.style.position = ‘relative’;
}
var ob_lefts = document.getElementsByClassName(‘ob-left’);
var ob_rights = document.getElementsByClassName(‘ob-right’);
for(let i=0; i<ob_lefts.length; i++) {
ob_lefts[i].addEventListener(“click”, function(event){
carousel(1, event);
});
ob_rights[i].addEventListener(“click”, function(event){
carousel(-1, event);
});
}

function carousel(n=0, event) {
if((n<0 && counter>-8) || (n>0 && counter<0)) {
counter+=n;
for(let i=0; i<elements.length; i++) {
elements[i].style.left = 100/item*counter+’%’;
}
}
}
})();

</script>
</body>
</html>

Labels: Web development

Edit This post