2 rows of <li> elements in a slider?

[Solarpitch]

Hi Guys,

 

I have a simple slider I've code with jQuery that moves through a list of <li> elements. I want the user to have a option to show smaller thumbs and in doing so the slider changes to 2 rows of <li>. I've attached an example of what I'm talking about. Not sure what the best way to approach this is, maybe more of a css question?

 

When the user switches between the 2 views I want the next <li> in the large view, to be the element below in the small view.

 

Any help would be great.

[Mahngiel]

From:

<ul>
     <li>IMG<//li>
     ...
     </li>IMG</li>
</ul>

 

To:

<ul>
     <li><ul>
          <li>IMG</li>
          <li>IMG</li>
     </ul></li>
     ...
     <li><ul>
          <li>IMG</li>
          <li>IMG</li>
     </ul></li>
</ul>

 

Boom.