Gallery image slider

Question

I'm not asking for code or anything. I have this division below and i'm looking to make it as a slider, so upon a user click, the current display will shift to the left, and a different but same-looking division would appear. I'm new to website development, i just need some guidance on what to search for, and if any have certain links that could be beneficial. Thank you.

HTML:

     <div id="first">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>

CSS:

#first
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
}

Shape:

Answer 1

Add some arrows on each side with left or right pictures and then try something like this, after wrapping two pictures in an overflowable-hidden-type div:

window.left = function () {
    $('img:first').before($('img:last').get(0).outerHTML);
    $('img:last').remove();
}
window.right = function () {
    $('img:last').before($('img:first').get(0).outerHTML);
    $('img:first').remove();
}

 $('img:even').css('opacity','.6'); // make even images lighter window.left = function () { $('img:first').before($('img:last').get(0).outerHTML); // copy the last picture before the first one. $('img:last').remove(); // remove the last picture from the end of the stack. } window.right = function () { $('img:last').before($('img:first').get(0).outerHTML); // copy the first picture after the last one. $('img:first').remove(); // remove the first picture from the beginning of the stack }

 html { font-size: 50px; } #first { overflow: hidden; height: 150px; width: 740px; } img { margin-left: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <p onclick="left()"> <</p> </td> <td> <div id="first" style="display:inline-block;"> <img id="image1" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image2" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image3" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image4" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image5" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image6" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image7" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image8" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image9" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> <img id="image10" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" /> </div> </td> <td> <p onclick="right()">></p> </td> </tr> </table>

Regarding the snippet, it works, I just used the same picture for everything, so I made the even ones lighter in hue.