I have successfully created a 100% width slide using jQuery. However, I am facing an issue where the horizontal overflow is not being hidden. Here are my codes:
HTML,
<div class="slide">
<ul>
<li><img src="inc/imj/slide/1.jpg" alt="" /></li>
<li><img src="inc/imj/slide/2.jpg" alt="" /></li>
<li><img src="inc/imj/slide/3.jpg" alt="" /></li>
</ul>
<div class="reff">
<span class="before">
<img src="inc/imj/before.jpg" alt="" />
</span>
<span class="after">
<img src="inc/imj/after.jpg" alt="" />
</span>
</div>
</div>
CSS,
.slide{
border-bottom:1px solid orange;
height:400px;
width:100%;
float:left;
width:140%;
overflow:hidden;
}
.slide ul li img{width:1400px;height:400px;}
.slide ul li{display:inline-block;list-style-type:none;}
.slide span.before img{border-radius:40px 40px 40px 40px;}
.slide span.before img:hover{cursor:pointer;}
.slide span.after img{border-radius:40px 40px 40px 40px;}
.slide span.after img:hover{cursor:pointer;}
.slide .reff{
width:100px;
position:relative;
top:-35px;
left:-250px;
display:block;
margin-left:auto;
margin-right:auto;
}
Result,
Despite my efforts, the x scrollbar remains active and I am unable to hide it. How can I solve this issue?
Thank you for your assistance.
Note: This project was solely done for personal improvement and not for monetary gain. It is a hobby of mine.
Thank you..