Tips for resolving the Bootstrap 4 carousel glitch

Hello, I am currently working on implementing a multi-item Carousel that moves one item at a time with each click. However, in my case, clicking the right arrow results in the entire slide changing. To help you understand better, I have provided a link to the reference below. If you spot any mistakes in my code, please do let me know.

HTML


  <div class="row">
      <div id="carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="d-none d-lg-block">
              <div class="slide-box">
                <img src="https://picsum.photos/285/200/?image=0&random" alt="First slide">
                <img src="https://picsum.photos/285/200/?image=1&random" alt="First slide">
                <img src="https://picsum.photos/285/200/?image=2&random" alt="First slide">
                <img src="https://picsum.photos/285/200/?image=3&random" alt="First slide">
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-none d-lg-block">
              <div class="slide-box">
                <img src="https://picsum.photos/285/200/?image=4&random" alt="Second slide">
                <img src="https://picsum.photos/285/200/?image=5&random" alt="Second slide">
                <img src="https://picsum.photos/285/200/?image=6&random" alt="Second slide">
                <img src="https://picsum.photos/285/200/?image=7&random" alt="Second slide">
              </div>
            </div>
         </div>
        </div>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
        </div>

CSS


.carousel {
  width: 100%;
}

.slide-box {
  display: flex;
  justify-content: space-between;
}
.slide-box img {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 1600px;
}
.carousel-caption {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: .5rem;
}

Reference Link: CodePen

OUTPUT Image

htmlcssbootstrap-4

Answer №1

Hello @smithhari, it is important to note that each image should be enclosed within a 

<div class="carousel-item"></div>
in order to create a carousel effect. Currently, your code shows multiple images within the same 
<div class="carousel-item"></div>
tags, resulting in only two slides with multiple images each. Make sure to create a separate 
<div class="carousel-item"></div>
for each image tag to display them correctly in the carousel.

<div class="carousel-item active">
      <img class="d-block w-100" src="https://picsum.photos/285/200/?image=0&random" alt="First slide">
</div>
<div class="carousel-item">
      <img class="d-block w-100" src="https://picsum.photos/240/200/?image=0&random" alt="Second slide">
</div>
<div class="carousel-item">
      <img class="d-block w-100" src="https://picsum.photos/270/200/?image=1&random" alt="Third slide">
</div>
</div>

Answer №2

Try out the following code snippet and see if it meets your requirements CodePen Link

$('#sliderExample').on('slide.bs.carousel', function (e) {

  
    var $element = $(e.relatedTarget);
    var index = $element.index();
    var itemsPerSlide = 3;
    var totalItems = $('.carousel-item').length;
    
    if (index >= totalItems-(itemsPerSlide-1)) {
        var itemsToSlide = itemsPerSlide - (totalItems - index);
        for (var i=0; i<itemsToSlide; i++) {
            // append new slides at the end
            if (e.direction=="left") {
                $('.carousel-item').eq(i).appendTo('.carousel-inner');
            }
            else {
                $('.carousel-item').eq(0).appendTo('.carousel-inner');
            }
        }
    }
});


  $('#sliderExample').carousel({ 
                interval: 5000
        });


  $(document).ready(function() {
    /* show lightbox when clicking a thumbnail */
    $('a.thumb').click(function(event){
      event.preventDefault();
      var content = $('.modal-body');
      content.empty();
        var title = $(this).attr("title");
        $('.modal-title').html(title);        
        content.html($(this).html());
        $(".modal-profile").modal({show:true});
    });

  });
@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    /* CSS code for responsive carousel items */
}

 /* Bootstrap Lightbox using Modal */

#profile-grid { overflow: auto; white-space: normal; } 
#profile-grid .profile { padding-bottom: 40px; }
#profile-grid .panel { padding: 0 }
#profile-grid .panel-body { padding: 15px }
#profile-grid .profile-name { font-weight: bold; }
#profile-grid .thumbnail {margin-bottom:6px;}
#profile-grid .panel-thumbnail { overflow: hidden; }
#profile-grid .img-rounded { border-radius: 4px 4px 0 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div id="sliderExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <!-- Carousel items go here -->
        </div>
        <a class="carousel-control-prev" href="#sliderExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#sliderExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </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

What is causing variations in the sizes of my HTML tables?

I am having some issues with a particular HTML snippet that I have included below: <table> <tbody> <tr> <td><table>...</table></td> <td><table>...</table></td> <td><tab ...

htmlcsshtml-table

What is the best way to align content within a div to match the alignment of content outside of it using bootstrap?

I have a section that stretches across the width of the screen, but the text inside is contained within a container and aligns correctly. Below that section is a two-column layout, and I'm trying to align the text in the left column with the text abo ...

htmltwitter-bootstrapcssbootstrap-4

What could be causing the 'margin-top' property not to function as expected?

Although I understand the concept of 'margin-collapse', I am puzzled as to why there is no visible 10 px margin on the top of the first box here. The top box, which has the id 'first', should have a 10px margin above it. If this method ...

cssmargin

Is it possible to modify the CSS injected by an Angular Directive?

Is there a way to override the CSS generated by an Angular directive? Take, for instance, when we apply the sort directive to the material data table. This can result in issues like altering the layout of the column header. Attempting to override the CSS ...

javascripthtmlcssangulartypescript

Failure of knockout CSS binding to apply a class

I am attempting to assign a class dynamically based on a boolean value. Here is the structure of my code: <input data-bind=" css: { 'chkBxEdit': gThirdCheckboxEnabled(), 'chkBx': !gThirdCheckboxEnabled() ...

htmlknockout.js

Ensure that the anchor element's height fills the entire div when using the display:block property

My HTML code is very simple: <div class='mydiv'> <a href='#'>Link</a> <div> As for the CSS: div.mydiv { height: 200px; width: 200px; background-color:red; } div.mydiv a { display:block; color:yellow; b ...

htmlcss

Understanding the technique of extracting text from descendant nodes using Xpath

I am facing a scenario similar to this: <div id="m0"> ... <tr> <td></td> <td></td> <td>Radio</td> </tr> </div> <div id="m1"> ... <tr> <td></td> <td>< ...

pythonhtmlxpathweb-scrapinglxml

Exploring the Depths of the Internet: Uncovering Data with BeautifulSoup

I am currently working on extracting the rain chance and temperature/wind speed data for each baseball game from rotowire.com. My goal is to organize this data into three columns - rain, temperature, and wind. I have made some progress with the help of ano ...

pythonhtmlweb-scrapingbeautifulsoup

jQuery fails to retain multiple classes when appending elements

Strange things are happening when I use jQuery. I create a string like this: myBlock = """<div class="alert alert-success">...</div>""" But when I try to append it using jQuery, $("#msg_container").append(myBlock) The resulting div in the ...

jquerycssdom

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario). Is there a way to stretch the fieldset child to 100% without causing overflow? fieldset { height: 300px; ...

htmlcssflexbox

Content Management System editing plan

Have you ever wondered if there is a structured approach to editing content management systems like Wordpress and Joomla? When it comes to editing aspects such as CSS and JavaScript, what steps do you usually take? Personally, I have been creating files l ...

javascriptcsscontent-management-systemfrontendoverwrite

How to implement an 8-column layout within a 12-grid bootstrap framework?

Hey guys, so I've been trying to recreate this page with Bootstrap and it's all going smoothly except for this one part. Here is the link I'm referring to: https://i.sstatic.net/0mXMm.png I have 2 questions: Which HTML element should I us ...

htmlcsstwitter-bootstrap

Ways to prevent a background image from repeating in an HTML email without relying on CSS

I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...

htmlcss

items within the grid container are positioned without being constrained to rows and columns

After using the Container element, I noticed that all my grid items are displaying in columns instead of rows. How can I correct this layout issue? https://i.stack.imgur.com/9BjOA.png Click here to access the project link. ...

javascriptreactjswebbootstrap-4material-ui

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

An unusual icon with three varying sizes in a single file

I have come across an interesting favicon file. Click here to download the favicon file Unfortunately, I am unable to upload this image file as it does not meet the required format standards. Upon viewing the file in Windows 7, a fascinating discovery w ...

htmlcssimagefavicon

Tips for extracting text from a textarea while retaining newline characters:

When using jquery, my goal is to retrieve the text from a textarea element with new lines represented as \n instead of br tags. However, I encountered an issue where Firefox debugger does not display the \n or br characters when I select it and r ...

javascriptjqueryhtml

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml

Choosing a sibling element before another using CSS

Is there a way to make both of my icons display some text when hovered over? I managed to make it work, but the leftmost icon doesn't trigger the span element when hovered. The text needs to appear on the left side of the Yelp icon for design reasons. ...

htmlcss

Styling child elements in Angular using css from its parent element

I have a question: Regarding the structure below <component-parent> <first-child> <second-child> <third-child></third-child> </second-child> </first-child> </component-parent> Now I want t ...

cssangular