How to use slider arrows to activate Twitter Bootstrap tabnav controls

Question

I asked this question before and you guys helped me, everything works beside that the Navtab wich is active isnt highlited. For Example if i Press Tab 2, the tab is hilighted and the slider will swipe to Slide 2. But if i just Slide to Slide 2 from Slide 1 with the carousel, the Tab 1 stays highlited. Thanks a lot you guys are awesome

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ul class="nav nav-tabs alt-font text-uppercase letter-spacing-1 no-border font-weight-600 text-center" role="tablist">
    <li id="tab1" data-target="#myCarousel" data-slide-to="0" class="active"><a href="#tab1" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 1</a>
    </li>
    <li id="tab2" data-target="#myCarousel" data-slide-to="1"><a href="#tab2" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 2</a>
    </li>
    <li id="tab3" data-target="#myCarousel" data-slide-to="2"><a href="#tab3" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="carousel-inner" role="listbox">
      <!-- slider item-->
      <div class="item active" role="listbox">
        <row>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="Slide1Picture">
          </div>
          <div class="col-md-5 col-sm-6 pull-right">Slide 1
          </div>
        </row>
      </div>
      <!-- slider item-->
      <div class="item">
        <row>
          <div class="col-md-5 col-sm-6 pull-right">
            <img src="Slide2Picture">
          </div>
          <div class="col-md-5 col-sm-6 pull-right">Slide 2
          </div>
        </row>
      </div>
      <!-- slider item-->
      <div class="item">
        <row>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="Slide3Picture">
          </div>
          <div class="col-md-5 col-sm-6 pull-right">Slide 3
          </div>
        </row>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Hey Andrei, my intention is not to have someone to work for me for free, i am trying to get better to also be able to give something back to the community, its not that i lean back and have the thought that u kinda implied. i hope you are having a nice christmas day :-) fyi its for my personal webpage. cheers — HendrikEng, Dec 24 '15 at 10:10
@AndreiGheorghiu ..to get back on topic, my question is, if its even possible to highlight the tabs referring to the corresponding slide, or if it cant be done by datatarget and i need to use javascript onclick event, i know if it would be only two slides i could easily just use direct anchors in the carousel (left-right-controls) #ref, but with 3 that wont work, so i kinda thought it has to be a javascript. thanks andrei. — HendrikEng, Dec 24 '15 at 10:39
I am happy to learn you are willing to improve your programming skills. Could you recreate your problem here, in a snippet (provide a [mcve] of your problem)? Also, if applicable, provide any code you tried but did not work. I will gladly assist. — tao, Dec 24 '15 at 10:46

score 1 · Accepted Answer · edited Dec 24 '22 at 13:33

// store tab controls in a variable ($tabs)
// we will use .tab('show') on their containing links when slider arrows are clicked
var $tabs = $('#myCarousel>.nav-tabs>li');

// when data-slide="next" is clicked
$('[data-slide="next"]').on('click', function() {

  // if there is a $tabs after the class="active" one
  if ($tabs.filter('.active').next('li').length) {

    // .tab('show') its link 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');

  } else {

    // else .tab('show') first $tabs link
    $tabs.eq(0).find('a[data-toggle="tab"]').tab('show');
  }
});

// when data-slide="prev" is clicked
$('[data-slide="prev"]').on('click', function() {

  // if there is a $tabs before the class="active" one 
  if ($tabs.filter('.active').prev('li').length) {

    // .tab('show') its link 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');

  } else {

    // else .tab('show') last $tabs link
    $tabs.eq($tabs.length - 1).find('a[data-toggle="tab"]').tab('show');
  }
});

Full working example here:

var $tabs = $('#myCarousel>.nav-tabs>li');
$('[data-slide="next"]').on('click', function() {
  if ($tabs.filter('.active').next('li').length) {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
} else {
    $tabs.eq(0).find('a[data-toggle="tab"]').tab('show');
  }
});
$('[data-slide="prev"]').on('click', function() {
  if ($tabs.filter('.active').prev('li').length) {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
  } else {
    $tabs.eq($tabs.length - 1).find('a[data-toggle="tab"]').tab('show');
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ul class="nav nav-tabs alt-font text-uppercase letter-spacing-1 no-border font-weight-600 text-center" role="tablist">
    <li id="tab1" data-target="#myCarousel" data-slide-to="0" class="active"><a href="#tab1" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 1</a>
    </li>
    <li id="tab2" data-target="#myCarousel" data-slide-to="1"><a href="#tab2" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 2</a>
    </li>
    <li id="tab3" data-target="#myCarousel" data-slide-to="2"><a href="#tab3" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="carousel-inner" role="listbox">
      <!-- slider item-->
      <div class="item active" role="listbox">
        <div class="row">
          <div class="col-md-5 col-sm-6 pull-right">Slide 1
          </div>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/e5/ac/a2/e5aca2429cf6b0c13dfc618f7c57c3f0.jpg">
          </div>
        </div>
      </div>
      <!-- slider item-->
      <div class="item">
        <div class="row">
          <div class="col-md-5 col-sm-6 pull-right">Slide 2
          </div>
          <div class="col-md-5 col-sm-6 pull-right">
            <img src="http://rlv.zcache.com/i_love_htmls_business_card_holders-r8e1a329b030d41ea9c04c1cbfeb89e90_zh5vb_324.jpg">
          </div>
        </div>
      </div>
      <!-- slider item-->
      <div class="item">
        <div class="row">
          <div class="col-md-5 col-sm-6 pull-right">Slide 3
          </div>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="http://rlv.zcache.com/i_heart_html_tags_toothbrush_holder-r589d5af5980e43809f0afc3cf05aa049_zh5wb_324.jpg">
          </div>
        </div>
      </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

How to use slider arrows to activate Twitter Bootstrap tabnav controls

1 Answers1