Манипулирование формой содержимого div

Question

Код ниже - ползунок, который управляет двумя разделителями предыдущего и следующего. Каждый делитель представляет собой набор из десяти изображений, как вы можете видеть в двух параллельных вертикальных линиях. Я пытаюсь сделать каждый разделитель 2 параллельными горизонтальными линиями (по 5 изображений на каждой строке), однако он перепутался, и 2 делителя подключаются. Любая помощь, пожалуйста?

HTML:

<div id="wrapper"> 
    <div id="nav"> 
     <button id="prev" disabled>&lt;&lt;&lt;</button> 
     <button id="next">&gt;&gt;&gt;</button> 
    </div> 
    <div id="mask"> 
     <div id="item1" class="item"> 
      <a name="item1"></a> 
      <div class="content"> 
       <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> 
     </div> 
     <div id="item2" class="item"> 
      <div class="content"> 
       <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> 
     </div> 
    </div> 
</div> 

CSS:

#wrapper { 
    width: 500px; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #ccc; 
    overflow: hidden; 
} 
#nav button { 
    position: absolute; 
    top: 100px; 
} 
#prev { 
    left: 40px; 
} 
#next { 
    right: 40px; 
} 
#mask { 
    width: 5000px; 
    height: 100%; 
    background-color: #eee; 
}  
.item { 
    width: 500px; 
    height: 100%; 
    float: left; 
    background-color: #ddd; 
} 
.content img { 
    height: 100px; 
    width: 100px; 
    float:left; 
    margin-right: 4%; 
    margin-bottom: 6%; 
} 
.content { 
    width: 45%; 
    height: 220px; 
    top: 20%; 
    margin: auto; 
    background-color: white; 
    position: relative; 
}  
.content a { 
    position: relative; 
    top: -17px; 
    left: 170px; 
} 
.selected { 
    background: #fff; 
    font-weight: 700; 
} 
.clear { 
    clear:both; 
} 

Jquery:

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" 
src="js/jquery.scrollTo.js" 

$(document).ready(function() { 
    function shift(direction) { 
    var 
     $mask = $('#mask'), 
     items = $('.item').size(), 
     currentItem = $mask.data('currentItem'), 
     newItem; 

    if (currentItem == undefined) { 
     currentItem = 0; 
    } 

    newItem = currentItem + direction; 
    $mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem}); 

    if (newItem == 0) { 
     $("#prev").prop('disabled', true); 
    } else { 
     $("#prev").prop('disabled', false); 
    }  
    if (newItem == items - 1) { 
     $("#next").prop('disabled', true); 
    } else { 
     $("#next").prop('disabled', false); 
    } 
    } 

    $('#prev').click(function() { 
    return shift(-1); 
    }); 
    $('#next').click(function() { 
    return shift(1); 
    }); 
}); 

JSFIDDLE: http://jsfiddle.net/2ghovmww/

Answer 1

Как я понимаю вы можете добиться того, что вы хотите с : встроенный для каждого горизонтального блока, но по мере его реализации ширина вашего контейнера меньше ширины пяти элементов в строке, поэтому они не могут отображаться. Если вы используете переполнение: hidden, у вас будет две строки, но элементы, которые превышают ширину контейнера, будут скрыты. Поэтому сначала вы должны настроить ширину контейнера и его родительские элементы.