Carousel Arrows

[unplugged_web]

I'm trying to change a carousel to have arrows either side controlling the background image. I can get it to work on a static page but the site is built completely with PHP so I'm not sure how to do this.

I think what I need to do is have just a left and right button that change which image is shown when clicked.

So far I've got this:

PHP:

<?php if( $value==1 && isset( $pagecontrol[1] ) ) { ?>      <div id="tabblock">        <div style="width: 994px; height: 275px; position: relative;">          <?php foreach( $tabblock as $key=>$value2 ) { ?>          <div class="tabb" id="tabb-<?php echo $key ?>" style="position: absolute;<?php if( $key!=$tabblock_init ) { ?> display: none;<?php } ?>"><a onclick="return clicktrack( 'tab',<?php echo $value2['id'] ?>,'' );" href="<?php echo $value2['url'] ?>"<?php if( $value2['newwin']==1 ) { ?> target="_blank"<?php } ?>><img src="/images/dynamic/<?php echo $value2['image'] ?>" alt="<?php echo htmldisplay( $value2['title'] ) ?>" title="<?php echo htmldisplay( $value2['title'] ) ?>" /></a></div>          <?php } ?>          <?php if( count( $tabblock )>1 ) { ?>                  <div id="tabctrl">            <?php foreach( $tabblock as $key=>$value2 ) { ?>            <div id="tabb-cont-<?php echo $key ?>" class="tabb_tab <?php if( $key==$tabblock_init ) { ?> tabb_on<?php } else { ?> tabb_off<?php } ?>"> </div>            <?php } ?>            <?php echo $html_clear ?>          </div>          <?php } ?>        </div>      </div>

Also the JavaScript for the 'tabs' is:

<script type="text/javascript">        var currenttab=<?php echo $tabblock_init ?>; var lasttab=<?php echo count( $tabblock )-1 ?>; var automode=1;        function acttab( oldid,id ) {          $('#tabb-'+oldid).animate({left: -743},'swing',function(){ $(this).hide(); });          $('#tabb-'+id).css( 'left','743px' ); $('#tabb-'+id).show();          $('#tabb-'+id).animate({left: 0},'swing');          $('.tabb_tab').removeClass( 'tabb_on' );          $('.tabb_tab').addClass( 'tabb_off' );          $('#tabb-cont-'+id).removeClass( 'tabb_off' );          $('#tabb-cont-'+id).addClass( 'tabb_on' );          currenttab=id;        }        function autotabs() {          if( automode==1 ) {            var prevtab=currenttab;            currenttab++; if( currenttab>lasttab ) { currenttab=0; }            acttab( prevtab,currenttab );          }          setTimeout( "autotabs()",10000 );        }        setTimeout( "autotabs()",10000 );        $(document).ready(function() {          $('.tabb_tab').hover(function(){$(this).css('cursor','pointer');},function(){});          $('.tabb_tab').click(function() {            var id=$(this).attr("id");            id=id.replace( 'tabb-cont-','' );            if( currenttab!=id ) { acttab( currenttab,id ); }          });          $('#tabblock').hover( function(){ automode=0;$("#tabctrl").slideDown( 200 ); },function(){ automode=1;$("#tabctrl").slideUp( 200 ); } );        });      </script>

The Javascript for the 'click track' is:

function clicktrack( type,id,loc ) {  $.ajax({    async: false, type: "POST", url: "/ajax/clicktrack.php",    data: { type: type, id: id, loc: loc }  });  return true;}

and the click track.php file is:

if( empty( $_POST['id'] ) || !ctype_digit( $_POST['id'] ) ) {    echo "no id received";    exit();  } else {    if( $_POST['type']=="banner" ) {      usedb( $country_modules[$ccode2]['db_web'],"dbLinkInt" );      $query="update front_banner_pool set clicks=clicks+1 where id=".dbstr( $_POST['id'] );      dbupdate( $query,"dbLinkInt" );      echo "ok";      exit();    } elseif( $_POST['type']=="tab" ) {      usedb( $country_modules[$ccode2]['db_web'],"dbLinkInt" );      $query="update front_tabblock set clicks=clicks+1 where id=".dbstr( $_POST['id'] );      dbupdate( $query,"dbLinkInt" );      echo "ok";      exit();    } else {      echo "no valid type received";      exit();    }  }

CSS:

#tabctrl {display: block!important;padding: 0;padding: 10px 0 10px 0!important;width: 100%!important;top: 50%;bottom: auto!important;margin-top: -5px!important;}#tabb-cont-0, #tabb-cont-1{position:absolute}#tabb-cont-0{left:0;}#tabb-cont-1{right:0;}

Edited October 7, 2014 by thehappyappy

[justsomeguy]

My first suggestion would probably be to compare the static HTML code with the HTML code that PHP generates, and check your Javascript console for error messages.

[unplugged_web]

Thanks, I'll give that a go. I think the problem is when the images are loaded it also loads a button for each of them, but on the static page I can load just two (one for the left and one for the right)