I’ve got a div with images in it. There are going to be a lot of images so I want to be able to scroll left and right within the div with the use of buttons. I previous had the code was working [the javascript was copied over to this new version and I changed the CSS for a new layout] but upon changing the divs from media queried and response to static straight CSS, it no longer scrolls.
html:
<div id="maincontent">
<h3 align="center" > Title </h3>
<div id="gallery-display">
<div id="image-1"><img src="image1.jpg" alt="" /></div>
<div id="image-2"><img src="image2.jpg" alt="" /></div>
<div id="image-3"><img src="image3.jpg" alt="" /></div>
<div id="image-4"><img src="image4.jpg" alt="" /></div>
</div>
<div id="gallery-slider-parent">
<div class="left-slider-button">
<input
type="button"
value="◄"
onmousedown="scrollDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
<div id="gallery-slider">
<a href="#image-1"><img src="image1.jpg" /></a>
<a href="#image-1"><img src="image2.jpg" /></a>
<a href="#image-1"><img src="image3.jpg" /></a>
<a href="#image-1"><img src="image4.jpg" /></a>
<a href="#image-1"><img src="image1.jpg" /></a>
<a href="#image-1"><img src="image2.jpg" /></a>
<a href="#image-1"><img src="image3.jpg" /></a>
<a href="#image-1"><img src="image4.jpg" /></a>
<a href="#image-1"><img src="image1.jpg" /></a>
<a href="#image-1"><img src="image2.jpg" /></a>
<a href="#image-1"><img src="image3.jpg" /></a>
<a href="#image-1"><img src="image4.jpg" /></a>
</div>
<div class="right-slider-button">
<input
type="button"
value="►"
onmousedown="scrosllDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
</div>
</div>
css: // I think the problem is somewhere here in the CSS
body {
background-color: #000;
}
#maincontent {
width: 960px;
margin: 0 auto;
background-color: #000;
color: #fff;
}
#gallery-display {
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: #000;
}
#gallery-display img {
display: block;
margin: 0 auto;
height: 500px;
right: 0;
left: 0;
}
#gallery-display [id^='image']:target img {
top: 0;
display: block;
margin: 0 auto;
height: 500px;
}
#gallery-display [id^="image"] img {
position: absolute;
top: -500px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}
#gallery-display [id^='image']:target a {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}
#gallery-slider-parent {
background-color: #000;
position: relative;
width: 960px;
overflow: hidden;
float: left;
}
#gallery-slider {
background-color: #000;
display: inline;
width: 94%;
float: left;
height: 120px;
overflow: auto;
white-space: nowrap;
}
#gallery-slider img {
height: 75px;
padding: 15px;
float: none;
}
.left-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
background-color: #151515;
}
.right-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
display: inline-block;
background-color: #151515;
}
javascript:
var timer1;
function scrollDiv(divId, depl) {
var scroll_container = document.getElementById(divId);
scroll_container.scrollLeft -= depl;
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}