Typoscript add class to the first element using stdWrap

Question

I have a custom requirement to display an image slider using TypoScript. The images are taken from default tt_content image content element.

I've added the following TypoScript code to implement this;

lib.homeslider = COA
lib.homeslider {
    10 = CONTENT
    10 {
        table = tt_content
        select {    
            where = colPos = 3
            andWhere = deleted = 0
            andWhere = hidden = 0
            orderBy = rand()
        }
        renderObj =  FILES
        renderObj {
            references {
                table = tt_content
                fieldName = image
            }
            renderObj = IMAGE
            renderObj {
                file.import.data = file:current:uid
                file.treatIdAsReference = 1
                stdWrap.typolink.parameter.data = file:current:link
                stdWrap.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>
            }
        }
    }
    wrap = <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"><div role="listbox" class="carousel-inner">|</div></div>
}

This displayed the images in frontend. But my requirement is I want to add class "active" to the first image wrapper. I've added the following code to implement this, but not working.

stdWrap.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>

Final HTML output I need to generate is;

<div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade">
   <div role="listbox" class="carousel-inner">
      <div class="item active"> 
            <a href="#">
                 <img src="images/temp/startbild1.jpg" alt="#">
            </a>
      </div>
      <div class="item">
           <a href="#">
                <img src="images/temp/startbild2.jpg" alt="#">
           </a>
      </div>
      <div class="item">
            <a href="#">
                 <img src="images/temp/startbild3.jpg" alt="#">
            </a>
      </div>
   </div>
</div>

If anybody knows the solution, then please help me.

Answer 1

Your original TS is fine.

Supposing you have the images in the same CE (Content element), not in several CEs. As such:

For easier readability, I have modified the following line:

    stdWrap.wrap = <div class="item active">A|ENDA</div>|*|<div class="item">B|ENDB</div>|*|<div class="item">C|ENDC</div>

Which gives me:

<div id="c1531" class="csc-default">
  <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade">
    <div role="listbox" class="carousel-inner">
      <div class="item active">A<img src="index.php?eID=dumpFile&amp;t=p&amp;p=1106&amp;token=a71bae9f5bfc837dce6b7974e6f63aca5cc656ae" width="165" height="158"   alt="" >ENDA</div>
      <div class="item">C<img src="index.php?eID=dumpFile&amp;t=p&amp;p=1107&amp;token=0dab49e1d8dac7c8cfd7a7910133cb2398c19030" width="420" height="132"   alt="" >ENDC</div>
    </div>
  </div>
</div>

EDIT: try for random content

lib.homeslider = COA
lib.homeslider {
    10 = CONTENT
    10 {
        table = tt_content
        select {    
            where = colPos = 3
            andWhere = deleted = 0
            andWhere = hidden = 0
        }
        renderObj =  FILES
        renderObj {
            maxItems = 2 #as many as you want
            sorting = rand #not working, maybe with EXT:lvrandfiles
            references {
                table = tt_content
                fieldName = image
            }            
            renderObj = IMAGE
            renderObj {
                file.import.data = file:current:uid
                file.treatIdAsReference = 1

                stdWrap.typolink.parameter.data = file:current:link
                stdWrap.wrap = <div class="item active">A|ENDA</div>|*|<div class="item">B|ENDB</div>|*|<div class="item">C|ENDC</div>
          }
        }
    }
    wrap = <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"><div role="listbox" class="carousel-inner">|</div></div>
}

Answer 2

Finally I got the correct script;

lib.homeslider = COA_INT
lib.homeslider {
    10 = CONTENT
    10 {
        table = tt_content
        select {    
            where = colPos = 3
            andWhere = deleted = 0
            andWhere = hidden = 0
            orderBy = rand()
        }
        renderObj =  FILES
        renderObj {
            references {
                table = tt_content
                fieldName = image
            }
            stdWrap.wrap = |###SPLITTER###
            renderObj = IMAGE
            renderObj {
                file.import.data = file:current:uid
                file.treatIdAsReference = 1
                altText.data = file:current:title
                stdWrap.typolink.parameter.data = file:current:link
            }
        }
        stdWrap.split {
            token = ###SPLITTER###
            cObjNum = 1 |*| 2 |*| 3 || 4
            1.current = 1
            1.wrap = <div class="item active">|</div>

            2.current = 1
            2.wrap = <div class="item">|</div>

            3.current = 1
            3.wrap = <div class="item">|</div>

            4.current = 1
        }
    }
    wrap = <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"><div role="listbox" class="carousel-inner">|</div></div>
}