XSLT two column unordered list

Question

I need help with xsl transformation. I have xml being spitted out by SharePoint Server control as below:

<rows>
    <row>A</row>
    <row>B</row>
    <row>C</row>
    <row>D</row>
    <row>E</row>
    <row>F</row>
    <row>G</row>
    <row>H</row>
</rows>

I need to transform the above xml into below:

  <==  A-----------B  ==> An li sliding back and forth with the help of a slider plugin
       C-----------D
       E-----------F
       G-----------H

LIKE THIS:
_{(source: imagesup.net)}

Required HTML in the following format as that's how the slider plugin demands the html be rendered as for it to work:

<div class="content-carousel">
<!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li>
              <div class="content-left">
               <h4>A</h4>
               </div>
              <div class="content-right">
               <h4>B</h4>
               </div>
          </li>
        <li>
              <div class="content-left">
               <h4>C</h4>
               </div>
              <div class="content-right">
               <h4>D</h4>
               </div>
          </li>
          .
          .
        </ul>
</div>

HERE IS THE ACTUAL RAW XML: https://gist.github.com/4380967

Here is the bjqs slider plugin requirement:
_{(source: imagesup.net)}

WHAT I HAVE CURRENTLY: I am able to get two column layout but tables rows are involved to do so , which emits unnecessary markups not good for the slider plugin. So for each row, the following applies:

 <xsl:if test="$CurPos = 1 ">
    <xsl:text disable-output-escaping="yes">&lt;div&gt;&lt;table&gt;</xsl:text>
  </xsl:if>
  <xsl:if test="$CurPos mod 2 = 1">
    <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
  </xsl:if> 
 
<li>
  <td width="50%" valign="top">
    <table width="90%">
      <tr height="35px" min-height="35px" valign="top">
        <td>
          <span>
            <xsl:if test="string-length($SafeImageUrl) != 0">
              <div class="image-area-left">
                <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                  <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                </a>
              </div>
            </xsl:if>
            
            <H3>
                <a href="{$SafeLinkUrl}"> <xsl:value-of select="@Title"/> </a>
            </H3>
            <div class="newsgist"><xsl:value-of select="substring(@Comments,0,200)"/>
                <xsl:if test="string-length(@Comments) &gt; 200">…</xsl:if>         <a href="{$SafeLinkUrl}"> Details…</a>  
            </div>
          </span> 
        </td>
      </tr>
 
    </table>
  </td></li>
 
  <xsl:if test="$CurPos mod 2 = 0">
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
  </xsl:if>
  <xsl:if test="$CurPos = $LastRow ">
    <xsl:text disable-output-escaping="yes">&lt;/table&gt;&lt;/div&gt;</xsl:text>

Answer 1

Use:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:template match="/*">
     <div class="content-carousel">
     <ul class="bjqs">
      <xsl:apply-templates select="*[position() mod 2 =1]"/>
     </ul>
   </div>
 </xsl:template>

 <xsl:template match="row">
   <li>
     <div class="content-left">
        <h4><xsl:value-of select="."/></h4>
     </div>
       <div class="content-right">
         <h4><xsl:value-of select="following-sibling::*[1]"/></h4>
       </div>
  </li>
 </xsl:template>
</xsl:stylesheet>

When this transformation is applied on the provided XML document:

<rows>
    <row>A</row>
    <row>B</row>
    <row>C</row>
    <row>D</row>
    <row>E</row>
    <row>F</row>
    <row>G</row>
    <row>H</row>
</rows>

the wanted, correct result is produced:

<div class="content-carousel">
   <ul class="bjqs">
      <li>
         <div class="content-left">
            <h4>A</h4>
         </div>
         <div class="content-right">
            <h4>B</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>C</h4>
         </div>
         <div class="content-right">
            <h4>D</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>E</h4>
         </div>
         <div class="content-right">
            <h4>F</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>G</h4>
         </div>
         <div class="content-right">
            <h4>H</h4>
         </div>
      </li>
   </ul>
</div>