Carousel arrows

I’ve been asked to change the scrolling of a carousal from dots at the bottom to arrows either side but I’ve got no idea how to do that and would be grateful for some pointers.

The code currently is:

<?php if( count( $tabblock )>1 ) { ?>
          <div id="tabctrl" style="display: none; width: <?php echo ceil( 994-( count( $tabblock )*19 )+10 ) ?>px; background-color: rgba( 255,255,255,0.6 ); padding: 10px 0 10px <?php echo ceil( ( 994-( count( $tabblock )*19 )+10 )/2 ) ?>px; position: absolute; bottom: 0; left: 0;">
            <?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 } ?>">&nbsp;</div>
            <?php } ?>
            <?php echo $html_clear ?>
          </div>
          <?php } ?>
        </div>
      </div>

      <?php if( count( $tabblock )>1 ) { ?>
 <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>

Do you know what script you are using (if not a custom one)? There are lots of free slider scripts available that do what you want. (E.g. bxSlider, Slick etc.) It’s probably a lot easier to switch to a script that does what you want than to try to modify an existing one—unless the script you are using already has the appropriate option built in.

I’m not sure to be honest, I think that it’s a custom script but I’m not allowed to change it. I have to modify what’s there :frowning:

Can you show us the page in question? It’s a lot easier to see what’s going on in a live page rather than a huge chunk of text. Not to menion, the script CSS probably does the placing anyway, which you didn’t post.

sure it’s http://bit.ly/1hxqdsn

All I really want is a way of showing and hiding arrows depending on which image is being shown. I’m not worried about styling it as I can do that no problems but I’m having a bit of trouble with JS

Create a copy of htat page for this test I’m about to have you do. On your test copy, remove all of those buttons in the HTML except for the first two. So this

snip

Should now be this

snip

Now add this CSS in. If you know how to update this in the file -

#tabctrl {
display: block!important;
padding: 0;
padding: 10px 0 10px 0!important;
width: 100%!important;
top: 50%;
bottom: auto!important;
margin-top: -5px!important;
}

Then you have to change the position of the tabs

#tabb-cont-0, #tabb-cont-1{position:absolute}
#tabb-cont-0{left:0;}
#tabb-cont-1{right:0;}

Now that they are in position, change the background images on these elements to arrows.

I must stress to do exactly what I just did because it worked for me.

Thank you I tried that on a test page and it did work, but how do I get it to work on the live site? I thought I’d pasted in that bit of code but I think I’d left it off. It’s a php site and the tabs are created using this:

<?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" style="display: none; width: <?php echo ceil( 994-( count( $tabblock )*19 )+10 ) ?>px; background-color: rgba( 255,255,255,0.6 ); padding: 10px 0 10px <?php echo ceil( ( 994-( count( $tabblock )*19 )+10 )/2 ) ?>px; position: absolute; bottom: 0; left: 0;">
            <?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 } ?>">&nbsp;</div>
            <?php } ?>
            <?php echo $html_clear ?>
          </div>
          <?php } ?>

Also if you don’t mind could I ask if you could remove the full url’s from the code? Sorry but I’ve just started int he job and didn’t want my boss to see I’d posted here. Thanks

I edited the post and removed the HTML c ompletely since you’ve already done what I suggested.

I’d go ask in the PHP section. I can see what PHP is causing the 5 tabs to appear but I do not know the best way to limit it. I’d rather you go to the PHP section where you get professional help.

Thanks, I’ll ask there. You suggestion works well though thank you

You’re welcome. I would suggest talking to your boss and seeing if you could just switch carousels (my work uses slick slider and it’s GREAT) since that would be easier. Just be thorough in your explanation. Either way, good luck.

Thanks, that might not be a back idea.