Issue with utilizing tabpanes and carousel in Bootstrap

I have a question. There are three different Bootstrap Tabpanes. Each Tab has unique Carousel Items within it. I want the carousel to only activate when the tab is selected, currently it activates when the page loads. When selecting the third tab, it goes almost halfway through the carousel. Can someone assist me with this? I believe we can activate it using JS, but I am unsure how to do so for each tab selection.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div style="font-size:12pt;"><ul id="myTab" class="nav nav-tabs" 
    style="width: 100%; padding-top: 10px;">
    <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
    <li><a href="#tab2" data-toggle="tab">tab2</a></li>
    <li><a href="#tab3" data-toggle="tab">tab3</a></li>
    </ul></div> 
    <div class="tab-pane fade" id="tab1">
    <div id="myCarousel1" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators carousel-indicators-numbers" style="bottom: 
    -50px;">
      <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel1" data-slide-to="1"></li>
     </ol>
     <!-- Wrapper for carousel items -->
    <div class="carousel-inner" style="margin-top: 3%;">
      <div class="item active"><img class="img-responsive center-block 
    imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
      <div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div>
    </div>
    </div>
     <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel1" 
    style="background:none;color:black;" data-slide="prev"><span 
    class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel1" 
    style="background:none;color:black;" data-slide="next"><span 
    class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

          <div class="tab-pane fade" id="tab2">
    <div id="myCarousel2" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators carousel-indicators-numbers" style="bottom: 
    -50px;">
      <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel2" data-slide-to="1"></li>
     </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner" style="margin-top: 3%;">
      <div class="item active"><img class="img-responsive center-block 
    imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
      <div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div>
    </div>
    </div>
     <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel2" 
    style="background:none;color:black;" data-slide="prev"><span 
    class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel2" 
    style="background:none;color:black;" data-slide="next"><span 
    class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
      <div class="tab-pane fade" id="tab3">
    <div id="myCarousel3" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators carousel-indicators-numbers" style="bottom: 
    -50px;">
      <li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel3" data-slide-to="1"></li>
     </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner" style="margin-top: 3%;">
      <div class="item active"><img class="img-responsive center-block 
    imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
      <div class="item"><img class="img-responsive center-block imageslidesize" 
    src="../Images/02.JPG" alt="Second Slide"/></div>
    </div>
    </div>
     <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel3" 
    style="background:none;color:black;" data-slide="prev"><span 
    class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel3" 
    style="background:none;color:black;" data-slide="next"><span 
    class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

javascripttwitter-bootstraptwitter-bootstrap-3bootstrap-4react-bootstrap

Answer №1

To incorporate owl-carousel into a tab, it is necessary to assign identical IDs to each owl carousel with the same class="owl-carousel".

Example of Implementation : https://codepen.io/manektech/pen/XGagBe

HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <div>

        <!-- Navigation tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        </ul>

        <!-- Tab content -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
                <div id="owl-example" class="owl-carousel">
                  <div> <img src="https://www.fillmurray.com/640/360"> </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                  <div><img src="https://www.fillmurray.com/640/360">  </div>
                  <div> <img src="https://www.fillmurray.com/640/360">  </div>
                </div>    
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
            <div id="owl-example" class="owl-carousel">
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                  <div> <img src="https://loremflickr.com/640/360"> </div>
                </div> 
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

JavaScript:

 jQuery(document).ready(function() {
      jQuery(".owl-carousel").owlCarousel();
    });

Example of Implementation: https://codepen.io/manektech/pen/XGagBe

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

Modify the tooltip background color within Angular

I have a tooltip and I would like to customize its background. Currently, the default background color is black. <ng-template #start>Start</ng-template> <button [ngbTooltip]="start" type="button" class="btn btn-outline-danger"> &l ...

cssangulartypescripttwitter-bootstrapbootstrap-4

Javascript - How to manipulate double values without using floating points?

What kind of variable is recommended for performing calculations on double values without floating point errors? For example, if we have x = 0.6; We want to ensure that x*3/4 will result in 0.45 instead of 0.44999999999999996. ...

javascriptjavascript-objects

React redux - unable to load store without encountering any errors

I am currently working on a project inspired by the code example in the Learning React book, which focuses on using react redux and react router for a single page application. You can find my project here, where I have tried to replicate the example. To r ...

javascriptreactjsreduxreact-redux

How to toggle visibility of previous and next elements in a Laravel carousel

Just starting out with Laravel and Bootstrap. I'm attempting to showcase database data in a carousel format. Within the database, I've populated a few rows with text which I'd like to display on individual slides. My goal is for one row/sl ...

laravelbootstrap-4carousel

What is the best way to create a table of buttons with seamless integration, leaving no gaps between each button?

While developing a website, I encountered an issue where I couldn't figure out how to eliminate gaps between buttons. Despite searching online for a solution, I struggled to articulate my problem clearly. Essentially, I am trying to create a table lay ...

javascripthtmlcssbuttonhtml-table

Refresh the page only when on the initial page of the pagination

I've been utilizing this jQuery code with AJAX for pagination purposes. Currently, I am fetching data from a PHP file that displays limited information. Here is the index file snippet: <script type="text/javascript"> $(document).ready(fun ...

phpjavascriptjqueryajax

Create a layered structure using a specified path

I am aiming to create a function that can accept an object path, like { 'person.data.info.more.favorite': 'smth' } and then output a nested object: { person: { data: { info: { more: { favorite: 'smth& ...

javascriptobjectrecursionpathnested

Tips for resolving issues with mat-autocomplete during scrolling

When I open the mat-autocomplete and scroll down the page, I would like for the mat-autocomplete to stay in place. ...

javascriptangularangularjsmaterial-ui

Identify the credit card as either American Express or American Express Corporate

My JavaScript code can successfully detect credit card types, but I have encountered an issue. I am unable to differentiate between American Express and American Express Corporate cards. Is there a way to distinguish them or is it impossible to identify wh ...

javascriptcredit-card

When the model is replaced, the Vue.js directive v-html may fail to update

Upon running the code below (a Vue.js component), my expectation is that both the v-html directive and the console.log() will display the same value after the AJAX call returns. To my surprise, while v-html remains stuck at "loading...(1)", the value of o ...

javascriptajaxvue.js

The PHP page is not receiving any data when using the $.POST() method in jQuery

Even after clicking the submit button, my POST variable on the PHP page remains empty. I am trying to send data from a Javascript page to a PHP page. In my Javascript code: $('#btnSubmit').click(function(){ if(quantityArray[j] == undefined) ...

javascriptphpjquery.post

Unable to post login form using HTML in Node.js

I've encountered a similar issue on Stack Overflow several times, but haven't found a solution that works for me. I'm working on a registration form with a submit button that should send data to MySQL and then redirect me to the login page u ...

javascripthtmlnode.jssubmit-button

Looking for assistance with aligning the content of an input label using Bootstrap?

Is there a way to adjust the label content if it is larger than the input box size? My goal is to keep all input boxes on the same line while allowing labels to wrap accordingly. https://i.sstatic.net/NrLck.png I'm trying to achieve the alignment sh ...

javascripthtmlcssbootstrap-5

Improving Efficiency: Enhancing Mouseenter and Mouseout Functions with Jquery

Recently, I created a piece of code that functions very efficiently. However, I can't help but think it is slightly verbose and repetitive. Is there a way to streamline this code for better optimization? Below is the snippet of the code in question: ...

javascriptjqueryoptimization

Is there a way to input atypical day and time text into an XDate object?

In order to provide further context; we are dealing with a unique textual representation of time and date that varies significantly and requires conversion into an XDate () object (potentially multiple XDate objects). It's important to clarify that I ...

javascriptjsonnode.jsdatetime

Excessive width of Bootstrap container

Encountering a rather simple issue: the bootstrap container inside my navbar is too wide, causing an unwanted horizontal scrollbar as it expands the body. You can view the problematic page here. The theme used for this site can be found here. What's ...

htmlcsstwitter-bootstrap

Different ways to automatically trigger a function in JavaScript

There are various ways to trigger a function automatically in javascript when a page loads. I am interested in knowing which method is considered the most effective and reliable. If you have a unique approach that differs from others, please share it here ...

javascripthtml

What is the best way to trim a string property of an object within an array?

I am seeking a solution to access the "description" property of objects within an array and utilize a string cutting method, such as slice, in order to return an array of modified objects. I have attempted using for loops but have been unsuccessful. Here ...

javascriptarraystypescriptobjectslice

Concealment vs Deletion of DOM components

Conceal or Erase When dealing with changing DOM elements, is it better to hide them or delete them? Consider that the environment may change frequently and that elements can have various event callbacks. Hide: What is the best approach when hiding eleme ...

javascriptjquerycssoptimization

Troubleshooting Problem with JQuery in the YouTube Player API

Having some difficulty parsing YouTube video ids to a function that plays them in an embedded player using a combination of JavaScript and jQuery with the YouTube Data and Player APIs. Below is my code: <html> <head> <script src="//aj ...

javascriptjqueryapiyoutube