Currently, I am utilizing the Slide functionality of Bootstrap with jQuery and CSS. Everything is running smoothly without any issues.
Here is the source code I am working with:
<div id="photos" class="tabcontent">
<div id="ninja-slider">
<div>
<div class="slider-inner">
<ul>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/car1.jpg"></a></li>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/ban-xe-honda-civic.jpg"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail3}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail4}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail5}"/>"></a></li>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
</div>
In addition to the code above, here is the CSS styling being applied:
#ninja-slider .ns-img {
background-color: rgba(0,0,0,0.3);
background-size: contain;
border-radius: 3px;
cursor: default;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
padding-top: 67%;
}
#ninja-slider .slider-inner {
width: 727px;
margin: -2px auto;
font-size: 0px;
position: relative;
box-sizing: border-box;
}
Upon inspection using Firebug on various browsers, it appears that some lines are being automatically generated in the <ul> tag:
<ul style="overflow: hidden; padding-top: 50%; height: 0px;">
I am looking for solutions to either remove these autogenerated lines or adjust the padding-top from 50% to 67%. Any suggestions on how to solve this issue would be greatly appreciated.