A JavaScript lib to make a list of items sliding pages & the flex content & flexform working with it. [wip] only 2 items per page working at the time

base.js

(function($) {
    $.fn.slideshowTxtImg = function() {

        var $screen = $(this),
            $wrapper = $(this).find('.slideWrapper'),
            $slides = $(this).find('.slideWrapper .item'),
            slideWidth = parseFloat($screen.width()) *.47732,
            slideMargin = parseFloat($screen.width()) *.04537,
            wrapperWidth = (slideWidth + slideMargin) * $slides.length,
            autoTimer = setInterval(function(){}),
            pageLength = 2; // other than 2 won't work ...

        $slides.css({
            'float': 'left',
            'width': slideWidth,
            'margin-right': slideMargin
        });
        $wrapper.css('width', wrapperWidth);
        $screen
            .data('index', 0)
            .css('overflow-x', 'auto');

        // add controls if mouse control
        $controls = $('<ul class="controls" />'),
        $slides.each(function(i){
            if ((i+1)%pageLength){
                $controls.append('<li class="control"><a href="#">'+(i+1)+'</a></li>');
            }
        });
        $controls.find('.control:first-child').addClass('active')

        $screen
            .css('overflow', 'hidden')
            .append($controls);

        $controls.find('li:first-child').addClass('active')
        resetAutoTimer();


        function stopAutoTimer(){
            clearInterval(autoTimer);
        };

        function resetAutoTimer(){
            clearInterval(autoTimer);
            autoTimer = setInterval(function(){
                goTo($screen.data('index')+1);
            },8000);
        };


        $controls.click(function(e){
            e.preventDefault();
            if($(e.target).is('a')) {
                var i = $(e.target).closest('li').index();
                goTo(i);
                resetAutoTimer();
            }
        })

        $(window).resize(function(){

            slideWidth = parseFloat($screen.width()) *.47732,
            slideMargin = parseFloat($screen.width()) *.04537,
            wrapperWidth = (slideWidth + slideMargin) * $slides.length,

            $slides.css({
                'width': slideWidth,
                'margin-right': slideMargin
            });
            $wrapper.css('width', wrapperWidth);
            goTo($screen.data('index'));
        })

        function goTo(index){

            if (index+1 == $controls.children().length && $slides.length%pageLength == 1) {
                index -= 0.5;
            }
            if(index+1 > $controls.children().length ){
                index = 0;
            }
            if (!Modernizr.touch){
                $controls.find('li:nth-child('+Math.round(index+1)+')').addClass('active');
                $controls.find('li').not('li:nth-child('+Math.round(index+1)+')').removeClass('active');
            }
            if (Modernizr.csstransitions) {
                $wrapper.css('margin-left', -index*(slideWidth+slideMargin)*pageLength);
            }
            else {
                $wrapper.animate( {'margin-left': -index*(slideWidth+slideMargin)*pageLength}, 500 );
            }
            $screen.data('index', index);
        }
    }
}(jQuery));

content.ts

tt_content.slideshowTxtImg = COA
tt_content.slideshowTxtImg {
    1 = HEADERDATA
    1.value (
        <script type="text/javascript" src="typo3conf/ext/skinFlex/slideshowTxtImg/assets/js/base.js"></script>
    )
    5 = < lib.stdheader


    # Draw each image in the slideshowTxtImg.
    10 = FFSECTION
    10 {
        rootPath = t3datastructure : pi_flexform->images/el
        stdWrap.wrap = <div id="slideBloc_{field:uid}"class="slideBloc page"><div class="slideWrapper">|</div></div>
        stdWrap.insertData = 1

        10 = COA
        10{
            wrap =  <div class="item">|</div>

            10 = IMAGE
            10 {
                wrap = <div class="illu column">|</div>
                file {
                    import.data = flexformSection : image/el/file
                    import.wrap = uploads/skinFlex/slideshowTxtImg/
                    maxW = 202
                    maxH = 300
                }
            }

            20 = COA
            20 {
                wrap = <div class="content column column-2">|</div>
                10 = TEXT
                10{
                    data = flexformSection : image/el/name
                    wrap = <p class="h4-like">|</p>
                    required = 1
                }

                20 = TEXT
                20{
                    data = flexformSection : image/el/chapo
                    wrap = <p class="chapo" >|</p>
                    required = 1
                }
            }
        }
    }
    #init the slideshowTxtImg
    20 = HTML
    20 {
        value.data = field:uid
        value.wrap = <script type="text/javascript" > if(parseFloat(jQuery(window).width()) >= 640) { jQuery('#slideBloc_|').slideshowTxtImg(); }</script>
    }
}

flexform.xml

<T3DataStructure>
  <meta>
     	<langDisable>1</langDisable>
  	</meta>
  	<sheets>
  		<sDEF>
			<ROOT>
				<TCEforms>
					<sheetTitle>LLL:EXT:skinFlex/slideshowTxtImg/locallang.xml:flexform.slideshowTxtImg.sheets.general</sheetTitle>
		        </TCEforms>
				<type>array</type>
				<el>
					<images>
						<section>1</section>
						<type>array</type>
						<el>
							<image>
								<type>array</type>
								<tx_templavoila>
									<title>LLL:EXT:skinFlex/slideshowTxtImg/locallang.xml:flexform.slideshowTxtImg.image</title>
								</tx_templavoila>
								<el>
									<name>
										<TCEforms>
											<label>LLL:EXT:skinFlex/slideshowTxtImg/locallang.xml:flexform.slideshowTxtImg.title</label>
											<config>
												<type>input</type>
											</config>
										</TCEforms>
									</name>
									<chapo>
										<TCEforms>
											<label>LLL:EXT:skinFlex/slideshowTxtImg/locallang.xml:flexform.slideshowTxtImg.chapo</label>
											<config>
												<type>text</type>
											</config>
										</TCEforms>
									</chapo>
									<file>
										<TCEforms>
											<label>LLL:EXT:skinFlex/slideshowTxtImg/locallang.xml:flexform.slideshowTxtImg.imageFile</label>
											<config>
												<type>group</type>
												<internal_type>file</internal_type>
												<allowed>gif,jpg,jpeg,tif,bmp,pcx,tga,png,pdf,ai</allowed>
												<max_size>5000</max_size>
												<uploadfolder>uploads/skinFlex/slideshowTxtImg</uploadfolder>
												<maxitems>1</maxitems>
												<size>1</size>
												<selectedListStyle>width:200px</selectedListStyle>
												<show_thumbs>1</show_thumbs>
											</config>
										</TCEforms>
									</file>
									<link>
										<TCEforms>
											<label>LLL:EXT:skinFlex/slideshowTxtImg/locallang.xml:flexform.slideshowTxtImg.link</label>
											<config>
												<type>input</type>
												<size>15</size>
												<wizards type="array">
													<_PADDING type="integer">2</_PADDING>
													<link type="array">
														<type>popup</type>
														<title>Link</title>
														<icon>link_popup.gif</icon>
														<script>browse_links.php?mode=wizard</script>
														<JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
													</link>
												</wizards>
											</config>
										</TCEforms>
									</link>
								</el>
							</image>
						</el>
					</images>
				</el>
			</ROOT>
  		</sDEF>
  	</sheets>
</T3DataStructure>

locallang.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
  <meta type="array">
		<type>database</type>
		<description>Language labels for database tables/fields belonging to extension 'wec_contentelements'</description>
	</meta>
	<data type="array">
		<languageKey index="default" type="array">
			<label index="tt_content.slideshowTxtImg.title">slideshow text&amp;images</label>
			<label index="tt_content.slideshowTxtImg.description">This item manage the text&amp;images slideshow</label>

			<label index="flexform.slideshowTxtImg.sheets.general">Main Content</label>
			<label index="flexform.slideshowTxtImg.title">Title</label>
			<label index="flexform.slideshowTxtImg.chapo">Chapô</label>
			<label index="flexform.slideshowTxtImg.image">Image</label>
			<label index="flexform.slideshowTxtImg.imageFile">Image File</label>
			<label index="flexform.slideshowTxtImg.imageLink">Image Link</label>
		</languageKey>

		<languageKey index="fr" type="array">
			<label index="tt_content.slideshowTxtImg.title">Diaporama de texte illustré</label>
			<label index="tt_content.slideshowTxtImg.description">Cet élèment gère le diaporama de blocs de texte illustré</label>

			<label index="flexform.slideshowTxtImg.sheets.general">Contenu général</label>
			<label index="flexform.slideshowTxtImg.title">Titre</label>
			<label index="flexform.slideshowTxtImg.chapo">Chapô</label>
			<label index="flexform.slideshowTxtImg.image">Image</label>
			<label index="flexform.slideshowTxtImg.imageFile">Fichier image</label>
			<label index="flexform.slideshowTxtImg.link">Lien</label>
		</languageKey>
	</data>
</T3locallang>

main.less

.slideBloc { position: relative;
    &.page { padding:0; }
    .slideWrapper { -webkit-transition: .5s 0 margin;
    -moz-transition: .5s 0 margin;
    -ms-transition: .5s 0 margin;
    -o-transition: .5s 0 margin;
    transition: .5s 0 margin; }
    .item { .margin(0,5,0,0); }
    .h4-like { margin-top: 7px; }
    img { display: block; }
    .controls { position: absolute; bottom: 0; right: 0; .margin; .padding;
        li { .inline-block; .padding; .margin(0,1,0,0);
            &.active a { color: @black; }
        }
        a {
            &:hover { color: @black; }
        }
    }
    .column { width: 40.309%; margin: 0 4.537% 0 0; }
    .column-2 { .margin; width: 55.154%; }
}