Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet:

The only modification I made was using these imports:

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

This is the code I used:

html

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
        </ul>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">

        <div class="item active">
          <img src="http://placehold.it/1200x400/cccccc/ffffff">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->

         <div class="item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed... 
        ...

css:

body { padding-top: 20px; }
#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

You can view the output on this jsfiddle link: https://jsfiddle.net/2ku1jhk9/1/

Despite not receiving any errors in the console, it appears that the implementation is not functioning properly with Bootstrap 4. Can anyone provide insights on why it's not working and suggest changes needed?

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

When using the Bootstrap4 carousel, a small modification needs to be made to the code. All the carousel item classes should be changed from item to carousel-item. See the updated code below:

<div class="item">

should be changed to 

<div class="carousel-item">


$(document).ready( function() {
    $('#myCarousel').carousel({
interval:   4000
});

var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
body { padding-top: 20px; }
#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
    <ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
        </ul>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="carousel-item active">
          <img src="http://placehold.it/1200x400/cccccc/ffffff">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
 
         <div class="carousel-item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
        
        <div class="carousel-item">
          <img src="http://placehold.it/1200x400/dddddd/333333">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
          </div>
        </div><!-- End Item -->
        
        <div class="carousel-item">
          <img src="http://placehold.it/1200x400/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
          </div>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->
    </div><!-- End Carousel -->
</div>

For reference, here is the Fiddle version.

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

Transforming AJAX into jQuery

How can I rewrite the following code using only the jQuery library? <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function do_it(value) { var url = "test.p ...

jqueryajax

Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solut ...

javascriptjqueryasp.netcsshtml

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

javascripthtmlwebpacktags

Are Twitter Bootstrap buttons compatible with iPad devices?

Have you ever tried using the attractive buttons provided by Twitter? They can be a great alternative to standard radio/checkbox options. If you have used them in your production, how effective were they? I am particularly curious about their compatibilit ...

javascripthtmltwitter-bootstrap

What are the steps for populating a table cell with data using AJAX, MySQL, and PHP in the given situation?

The challenge is to create an HTML table with two columns where the first column gets its data from PHP and MySQL. The goal is to turn the values in the first column into clickable links that, when clicked, trigger an AJAX call to fetch information from th ...

phphtmlmysqlajaxhref

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

htmlcssdivide

Is it possible to execute appendChild in the context of JS-DOM-creation?

Hey there, I'm a newbie trying my hand at DOM creation. I've encountered a strange issue with appendChild - the first and second tries work fine, but I'm completely stuck on the third attempt. Here's my HTML: <html> <head> ...

javascripthtmldomappendchild

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

What is the best way to display two random list items using jQuery?

Can anyone guide me on how to display two random li elements using jQuery? I attempted the following: $('#id_show12').click(function() { var random1 = Math.floor(Math.random() * 7); var random2 = Math.floor(Math.random() * 7); $(&a ...

jquery

The URL's ajax GET request is timing out despite it working fine in browsers and CURL

I came across a question similar to mine, but unfortunately it does not have an accepted answer. My issue lies with the ajax request timing out. Strangely enough, when I make a `GET` request using the browser or `curl` on the same URL, everything works pe ...

jqueryajaxamazon-web-services

How can I alter the columnWidth setting in Masonry when detecting a different screen width or window width?

I am currently working on adjusting the layout of my masonry script to respond accordingly when the browser window or screen width drops below a certain threshold. However, I am running into issues as it seems to break whenever I try to make this adjustmen ...

javascriptjqueryfunctionjquery-masonry

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

Tips for correcting boolean checks and verification for undefined variables

Currently, I am working on a code where I need to verify the truthfulness of variables $scope.bankregel and $scope.showInvoices. Within my function, I'm already implementing a conditional check in the if and else if statements. How can I incorporate ...

jqueryangularjs

Guide to swapping images on button click in HTML with dynamically changing image URLs retrieved from the server

I am a beginner in client-side scripting and new to Stack Overflow. I am looking for guidance on how to change an image within a div element upon clicking a button or anchor tag. Here is the code snippet I have written to achieve this: $scope.captchaCha ...

javascriptjqueryhtml

Using jQuery to Send a POST Request and Delete a File when a Button is

Seeking assistance for a project I'm working on. I have created this page where users can access an image gallery. Currently, I am adding a feature to allow users to delete images. Following advice from the community here here, I am exploring the jQ ...

phpjquerydelete-file

Organizing an HTML layout

Looking for a way to sort a div structure based on a parameter, I came across a small JavaScript that seems to not work as expected. It appears that the sorting function is not parsing the values perfectly... This is the logic I am using for sorting: < ...

javascripthtmlsorting

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

Flex items maintaining their size when the window decreases

My goal is to arrange two plotly plots side by side within a CSS flexbox, with the ability to resize them as the window size changes. The issue I'm facing is that while the plots expand correctly when the window is enlarged, they fail to shrink when t ...

javascriptcssflexboxplotly

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4