Is there a way to implement a bootstrap carousel where only one item moves with a single click?

Having trouble implementing a Bootstrap multi-item carousel with continuous movement after copying code from this source. The effect looks different in my localhost environment. Can anyone provide assistance?

Links to CSS and JS Added:

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

CSS Styles:

.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

HTML Markup:

<div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
        </div>
      </div>

      <!-- Carousel Controls -->
      <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>

Jquery Functionality:

$('#myCarousel').carousel({
      interval: 10000
    })

    $('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));

      if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
      }
      else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });
javascriptjqueryhtmlcss

Answer №1

Although I am not very familiar with JSFiddle, I have successfully copied and pasted the fiddle into my own starter template. It seems like you might be missing jQuery or a similar component. Your code should function properly once you ensure that the css, jquery, javascript, and glyphicons are included. I recommend downloading a bootstrap starting folder (https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip) and pasting the code into an index.html file.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Bootstrap Starter Template</title>

<!-- Bootstrap Core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">


<style>
    .carousel-inner .active.left  { left: -33%;             }
    .carousel-inner .active.right { left: 33%;              }
    .carousel-inner .next         { left: 33%               }
    .carousel-inner .prev         { left: -33%              }
    .carousel-control.left        { background-image: none; }
    .carousel-control.right       { background-image: none; }
    .carousel-inner .item         { background: white;      }
</style>



</head>

<body>


<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">
    <div class="item active">
        <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
    </div>
</div>

<!-- Controls -->
<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>



<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>

<!-- Script to Activate the Carousel -->
<script>

    $('#myCarousel').carousel({
        interval: 10000
    });

    $('.carousel .item').each(function(){
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length>0) {
            next.next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });

</script>

</body>

</html>

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

Changing the visibility of a button based on a checkbox in JavaScript - here's how

Just starting out with JS and working on a react project. I need to toggle the visibility of a button from false to true when a checkbox is checked. Here's my code, I believe the logic is correct but it's not updating the UI. Any suggestions are ...

javascriptreactjsreact-hooksevent-listener

Deactivating The Canvas Element

I am currently working on a project that involves using Three.js alongside a menu placed above the canvas element, which is essentially a regular div. However, I have encountered an issue where the canvas element still registers input when interacting with ...

jqueryhtmlcsscanvasthree.js

Class variable remains unchanged following AJAX request

Upon completion of the ajax request, two integers are received - this.N and this.M. However, these values are not being set by the storeDims() function even though the correct decoding is done on the dims variable. This implies that I am unable to access ...

javascriptjqueryajaxclass

Successfully submitting form_with without experiencing any errors for mandatory fields

I am currently dealing with a form that triggers a sidekiq worker upon submission. The issue I am facing is that even if the form is empty, clicking submit still attempts to run the worker. What I would like is for an alert to notify the user that the fiel ...

javascriptjqueryruby-on-railsrubyforms

"Enhancing User Interaction with jQuery Hover State Dropdown Menus

Here's my issue: I've created a drop-down menu and I want the text color to change when hovering over the menu. Additionally, I'd like the hover state to remain active when hovering over the submenu. Currently, I'm using this code: $( ...

javascriptjquerycsshoverdrop-down-menu

The auto search feature seems to be malfunctioning after clicking the button

Despite my best efforts, I am still unable to resolve this issue. I have tried numerous links and code snippets, but I am encountering some difficulty in finding a solution. THE ISSUE: I have an input field with type 'Text' for searching employ ...

javascriptjqueryajax

Guide to integrating the Duda White Label API with an HTML website

Currently, I am in the process of integrating the Duda White Label API into a .html page to ensure that it aligns with my custom CSS. To guide me through this task, I am referring to the instructions provided at: After inserting my API key, Password, and ...

phphtmlcssapi

Is it just me or does escape() not work reliably?

With the use of JavaScript, I am able to generate HTML code dynamically. For instance, I can add a function that triggers when a link is clicked, like so: $('#myDiv').append('<a href="javascript:start(\''+TERM+'\ ...

javascriptstringbrowserescaping

What's the issue with the addClass function not working as expected?

I am currently integrating the website's navbar using PHP, which is why I am unable to use class="active" to highlight the active tab on my navigation bar individually. To solve this issue, I attempted to add the active class to the corresponding tab ...

jqueryhtmlcss

I attempted to pull information from the database and display it in my checkboxes. However, I encountered an issue where I am unable to save the selected checkboxes back to the database

This code snippet is written in Blade for a reservation form: <div class="col-lg-6"> <div class="contact-form"> <form id="contact" action="{{url('/reservatio ...

phphtmllaravelwebcheckbox

I would like to implement a delay on this button so that when it is clicked, there is a pause before navigating

When I add the delay, it doesn't work, and when I remove it, it does. What can I do to make this button have a href link that delays before redirecting to another page? (I'm a newbie) I need to click and wait 3 seconds before navigating to other ...

javascripthtmljquerycss

Exploring methods for obtaining client origin in Vue

I have a variety of domains such as https://www.ilajobs.com and levelcoding.com When attempting to retrieve the client's origin using the following code: getOrigin() { this.origin = window.location.origin; }, The expected result should be: ilajob ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Detect if the user is using Internet Explorer and redirect them to a different

My web application is having trouble rendering in Internet Explorer. In the meantime, I would like to detect if the user is using IE and redirect them to a different page specifically for IE visitors. What is the best way to accomplish this? Should I use ...

phpjavascripthtmlcss

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

Display a PanelGroup on JSF when a p:tab is clicked

My current frontend is developed with JSF and it loads a large amount of data, which may not always be necessary for the user. This data is categorized under a tab that is rendered based on a specific condition: <p:tab id="summary-tab2" title="Title of ...

jqueryhtmljsfjsf-2.2

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

One interesting feature of bootstrap is that it allows users to disable links within its dropdown menu component by simply adding a class="disabled" into the corresponding <li> tag. I am looking to create some Javascript code so that when a user sel ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating transclusion templates in a compiled format

<div overlay config="overlayConfig"> <div class="dismiss-buttons"> <button class="btn btn-default" ng-click="subscriptions()">Save</button> </div> </div> app.directive("Overlay", ["$timeout", "$compile ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-transclude

How to ensure an element is always aligned at the end of a line in ReactJS, no matter the screen dimensions

I have a unique element that rotates words at a set interval. <div className="inline-block flex justify-center items-center before:content-['lore_ipsum_dolor_lore_ipsum_dolor'] drop-shadow-[0_3px_3px_rgba(0,0,0,1)] t ...

htmlreactjstailwind-css

Ways to stop bootstrap tabs from ruining inactive content? [keeping track of tab status]

Although Bootstrap tabs are useful, a common issue is that content on inactive tabs is removed from the page flow. When switching to a new tab, the previous tab's display attribute is set to none instead of using visibility: hidden or other methods. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Exploring the use of functions in the setup method of Vue 3

I'm currently working on a simple app and utilizing mock-json-server to mimic http requests. Within my project, I have defined a function designed to retrieve the necessary information: import { ref } from 'vue' const getScores = () => ...

javascriptvue.jsvue-componentvue-composition-api