I would like to create a design similar to this:
However, I am struggling with the following:
How can I remove the left border from the first visible child?
I have not been able to replicate the exact example, but you can check out my jsFiddle for an idea.
<body onload='getAllListItems()'>
<div id='t'>
<button id='left' onClick="move(left)">
<</button>
<div id='list'>
<ul id='list-items'>
<li class="list">slide1</li>
<li class="list">slide2</li>
<li class="list">slide3</li>
<li class="list">slide4</li>
<li class="list">slide5</li>
<li class="list">slide6</li>
<li class="list">slide7</li>
<li class="list">slide8</li>
<li class="list">slide9</li>
<li class="list">slide10</li>
<li class="list">slide11</li>
</ul>
</div>
<button id='right' onClick='move(right)'>></button>
</div>
</body>
ul {
float:left;
height:50px;
width: 800px;
overflow: hidden;
}
#t{
background-color:#f16f00;
border: 1px #ffffff solid;
}
ul li {
border-left: 1px solid;
border-left-color: #f16f00;
color: #ffffff;
text-align: center;
width: 100px;
height: 50px;
float: left;
list-style-type: none;
background-color:#032258;
padding-top: 0;
padding-bottom: 0;
}
ul li:first-child {
display: block;
}
#left, #right {
float:left;
height:50px;
background-color:aqua;
font-size:2em;
padding-left: 20px;
padding-right:20px;
}
var list_items = [];
var index = 0;
var list_length = 0;
function getAllListItems() {
var temp = document.getElementsByClassName('list');
console.log(temp);
for (i = 0; i < temp.length; i++) {
list_items.push(temp[i]);
}
list_length = temp.length;
}
getAllListItems();
function move(dir) {
if (dir === left) {
var k = index + 1;
console.log('i:'+index);
console.log('k:'+k);
list_items[index].style.display = 'block';
list_items[index].style.border = 'none';
index--;
list_items[k].style.borderleft = '1px solid #425982';
if (index < 0) {
index = 0;
}
} else if (dir === right) {
list_items[index].style.display = 'none';
if (index >= ((list_length) - 1)) {
index = (list_length) - 1;
} else {
index++;
}
} else {
}
}