Image Gallery Horizontal Scrolling With Divs
I am currently trying to create an Image Gallery where the user can scroll
through the images for each page horizontally (left-right swiping as this
is meant for mobile phones and tablets). I can not figure out where I went
wrong, anyone have any idea?
My code is found at http://jsfiddle.net/8tDYk/
CSS:
.media{
width: 100%;
height: 288px;
float: left;
display: inline-block;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}
.image{
float: left;
height: 240px;
width: 75%;
margin: 3.2%;
text-align:center;
border: 7px solid white;
}
HTML:
<div class="media">
<div class="image">
<a
href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"
height="250px" style="max-width: 100%;" alt=""></a>
</div>
<div class="image">
<a
href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"
height="250px" style="max-width: 100%;" alt=""></a>
</div>
<div class="image">
<a
href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"
height="250px" style="max-width: 100%;" alt=""></a>
</div>
</div>
No comments:
Post a Comment