Guide on utilizing slider arrows for enabling Twitter Bootstrap tabnav controls

Previously, I sought help with an issue regarding a Navtab not being highlighted when active. The problem persists despite successfully configuring the slider to swipe to the corresponding slide upon selecting a tab. Specifically, if I manually slide from Slide 1 to Slide 2 on the carousel, Tab 1 remains highlighted instead of highlighting Tab 2. Any advice or solutions would be greatly appreciated. Thank you for your continued support!

<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>
htmlcsstwitter-bootstrapbootstrap-carousel

Answer №1

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

// Click event for data-slide="next"
$('[data-slide="next"]').on('click', function() {

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

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

  } else {

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

// Click event for data-slide="prev"
$('[data-slide="prev"]').on('click', function() {

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

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

  } else {

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

Check the full working example below:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show only the lower left quadrant within the img tag during the prepend operation

I'm attempting to add an <img> tag in front of a <div> similar to this example on JSFiddle. However, I have a specific requirement to only display the bottom left quarter of the image instead of the entire one. HTML Markup <div id="my ...

javascriptjqueryhtmlcss

Summon the keyboard to appear

How do I make the keyboard appear on my website? I have a javascript function that recognizes keyboard input, but I am struggling to display the keyboard on my mobile device. Is there a way to simulate traditional input and generate key events? I should ...

javascripthtmlmobile

Not considering CSS margins for nested DIVs

I recently acquired a classic bootstrap template that is structured like this: <div class="container"> <div class="row"> <div class="col-12"> ...header... <div class="carouselContainer"> ...carousel... ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

I am currently customizing a template for my MEAN app and I am trying to showcase some information retrieved from the database in three columns. However, I am facing an issue where the ng-repeat function is only displaying the data in a single column. Bel ...

javascriptcssangularjstwitter-bootstrap

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

javascriptjqueryhtml

Implementing the switchClass function on a parent class when hovering over a child class, while ensuring that only the specific divs are targeted and not others with the

Currently using the .switchClass function on both the .container divs whenever I hover, causing all child1 elements within these containers to change from 100% width to 40% width. However, I only want this switch to occur on the specific container that I&a ...

jqueryhtmlcsssass

Troubleshooting scope evaluation in AngularJS within style tags on IE9 not functioning

My issue involves a div block with a style attribute that includes left:{{left}}px; and right:{{right}}px. Even though $scope.left and $scope.right are being updated, my item still doesn't move as expected. I have created a fiddle to demonstrate th ...

cssangularjsinternet-explorer-9

How to access a separate database's Javascript library in XPages resources

Is there a way to import the javascript library from another database (content.nsf) into my current xpages database resources? I am trying to load the common.js file using the code below but it's not working. Can someone please help me correct it? &l ...

htmlxpages

What steps can I take to troubleshoot a non-functional button in a Bootstrap 5 Modal?

I have a Django based web site that utilizes Bootstrap 5 for styling. Among the data presented on the site is a table with a notes column containing lengthy text. To enhance readability and keep the table compact, I attempted to integrate the Bootstrap Mod ...

javascripthtmldjangobootstrap-modalbootstrap-5

What's the best way to ensure an endless supply of copied elements with identical classes to the clipboard?

Here is a snippet of my HTML code: <Div Class='POSTS'> <Div Class='POST'> <Div Class='CONTENT'>Text1</Div> </Div> <Div Class='POST'> <Div Class=&apos ...

javascripthtmljquerycopyclipboard

What is the reason behind the ineffectiveness of placing HTML5 canvas in the background?

I've been attempting to set an HTML5 canvas as my web page background, but I just can't seem to get it right. Can someone provide me with some guidance on how to achieve this? Here is the code from my latest attempt: <!DOCTYPE html> <ht ...

javascripthtmlcanvashtml5-canvas

Incorporate an SCSS file into the Stackblitz project

Is there a way to include an scss file in the stackblitz? I attempted it, but encountered some issues. Could you take a look and advise me on what to do? I also made an attempt to add home.html This is the project: Check out the stackblitz project here! ...

cssangulartypescriptsassionic3

What advantages does creating a class that can freely float in either direction offer?

Recently, I noticed a common trend on websites like : .left { float: left; } <div class="col two left" /> Is this considered best practice? It goes against the idea of creating classes solely for styling purposes. If we wanted to change the floa ...

htmlcssxhtml

Navigate the scroll bar horizontally one by one instead of all at once, due to a width problem

The issue I'm facing involves determining the correct width for scrolling left or right. This results in the navigation tabs not scrolling correctly one by one. Each time I click the scroll right button, it adds more width than necessary and causes th ...

javascriptjqueryhtmlcssnav

Creating an HTML Form that Sends an Email

I'm completely stumped as to where the issue lies! The mail() function is working perfectly fine (I tested it with a simple PHP file), but for some reason, my form isn't sending any emails! HTML <section id="contact"> <div id="go ...

javascriptphphtmlemail

Using FEWER loops to create column classes on Twitter - What is their functionality?

Bootstrap utilizes various LESS mixins to create its column classes, along with other classes; .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index} ...

csstwitter-bootstraploopsless

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4

Tips for aligning icons and text correctly within a table

I can't seem to align the icon vertically with the text. Currently, the image icon is positioned in the middle of the <td> tag, but I want it at the top, as shown in the jsfiddle: http://jsfiddle.net/TheAmazingKnight/N6fLp/ To help visualize th ...

csshtmlhtml-tabletablelayout

Centered brand logo with toggle buttons on both left and right sides in Bootstrap 4 menu

I currently have a navbar menu layout that appears one way on larger screens and collapses differently on smaller screens: https://i.sstatic.net/cc6wR.jpg However, I am interested in arranging the menu buttons in a specific way - one to the left, one to ...

twitter-bootstrapbootstrap-4

VueJS does not support loading Jquery

When setting up my project with Bootstrap, I encountered an issue where even though I imported the jquery.min file before Bootstrap in my main.js file using require(), Bootstrap still threw an error saying that it requires jQuery. In my main.js file, I ha ...

jquerytwitter-bootstrapvue.js