On Click Div Scroll Right

Question

I'm in the process of creating a wedding website for my best friend. It includes a horizontal scrolling div with images inside of each individual in the bridal party. (There are 16 total.) When an image is clicked on, a short bio pops up of the individual. It looks great,

BUT I was curious if there was a way for the div to scroll, on the click of an arrow, to the next set of images hidden in the scroll.

I've looked up a lot of onClick scripts. I just can't seem to make any of them work the way I would like it to. Your help is much appreciated. Other ideas are welcome as well to get a similar effect.

HTML Code:

<div id="the_bridal_party">
    <h1>The Bridal Party</h1>

        <div id="scroll_wrapper">
        <div id="scroll_arrowleft"></div>
        <div id="scroll">
                <ul>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                </ul>
        </div>
        <div id="scroll_arrowright"></div>
        </div>

        <small>(To find out more about anyone in the bridal party, click on their image.)</small>
    </div>

CSS Code:

#the_bridal_party {
    width: 1000px;
    height: 380px;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#scroll_wrapper {
    width: 1000px;
    height: 300px;
    margin-top:25px;
    text-align: center;
}

#scroll {
    width: 920px;
    height: 300px;
    overflow: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}

#scroll ul {
    margin: 0;
    padding: 0;
    list-style-type: none;  
}

#scroll ul li {
    display: inline;
}

#scroll_arrowleft {
    background-image: url(images/arrowleft.png);
    background-position-x: 50%;
    background-position-y: 50%;
    background-position: center;
    background-size: initial;
    background-repeat: no-repeat;
    width: 29px;
    height: 300px;
    cursor: pointer;
    float: left;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#scroll_arrowright {
    background-image: url(images/arrowright.png);
    background-position-x: 50%;
    background-position-y: 50%;
    background-position: center;
    background-size: initial;
    background-repeat: no-repeat;
    width: 29px;
    height: 300px;
    cursor: pointer;
    float: right;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Answer 1

Something like :

$("#scroll_arrowright").click(function(){
$("ul").animate({
   "margin-left": "-=908",
   });
});

$("#scroll_arrowleft").click(function(){
    $("ul").animate({
       "margin-left": "+=908",
       });
    });

with a little tricks to deactivate on first and last position.

Answer 2

You could try something like the following using anchor tags.

<a href="#image1" id="a1">Person 1</a>
<a href="#image2" id="a2">Person 2</a>
<a href="#image3" id="a3">Person 3</a>

Then in each div (assuming each bridal member has their own div), you can put

<div id="image1">Stuff goes here...</div>
<div id="image2">Stuff goes here...</div>

Or if you want to use jQuery, you could do

var currentimage = 1;
var maximages = 16;
$('#myrightarrow').on('click', function(){
    currentimage++;
    if(currentimage >= maximages){
        currentimage = 16;
    }
    $('#div' + currentimage).focus();
});
$('#myleftarrow').on('click', function(){
    currentimage--;        
    if(currentimage == 0){
        currentimage = 1;
    }
    $('#div' + currentimage).focus();
});

Pretty basic, apologies in advance if it's not what you are looking for. This won't scroll nicely or anything, it will just jump to the image.

Answer 3

Using jQuery, you can move through the #scroll pretty easily: DEMO You can adjust the newMargin values based on margins/padding of the LI elements

$(function(){
    $('#scroll_arrowleft').on("click",function(){
        var newMargin = 0;
        switch (parseInt($('#scroll ul').css("margin-left"),10)) {
            case 0:
                newMargin = -2760;
                break;
            case -920:
                newMargin = 0;
                break;
            case -1840:
                newMargin = -920;
                break;
            case -2760:
                newMargin = -1840;
                break;
            default:
                newMargin = 0;
        }
        var newMargin = newMargin + "px"
        $('#scroll ul').animate({marginLeft:newMargin});
    });
        $('#scroll_arrowright').on("click",function(){
        var newMargin = 0;
        switch (parseInt($('#scroll ul').css("margin-left"),10)) {
            case 0:
                newMargin = -920;
                break;
            case -920:
                newMargin = -1840;
                break;
            case -1840:
                newMargin = -2760;
                break;
            case -2760:
                newMargin = 0;
                break;
            default:
                newMargin = 0;
        }
        var newMargin = newMargin + "px"
        $('#scroll ul').animate({marginLeft:newMargin});
    });
});