CSS with photo gallery slider buttons - not scrolling

HTML & CSS
1

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="&#9668;"
                    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="&#9658;"
                    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);
}
2

HI,

You probably want to set the anchor and image to display:inline-block.


#gallery-slider img,#gallery-slider a{display:inline-block;}

Where is the js for the right scroll?

You are almost calling the left button routine here for the right button:


 <div class="right-slider-button">
                <input  
                    type="button" 
                    value="&#9658;" 
                    onmousedown="scrosllDiv('gallery-slider', 3)" 
                    onmouseup="clearTimeout(timer1)" 
                />
            </div>

There is no routine called ‘scrosllDiv’ (note the s in the middle).