Issue with Bootstrap Carousel: all elements displayed at once

I'm in the process of building a carousel. I have set up the structure, but I only want five blocks to be visible initially, with the sixth block appearing after clicking an arrow. How can I achieve this?

My strategy: (adopted from here)

img{
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: block;
}
ul{
  display: inline-block;
}
li{
  list-style-type: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <!----------->
      <!-- CTA 1 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 1</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 2 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 2</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 3 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 3</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 4 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 4</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 5 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 5</span>
        </li>
      </ul>
      <!----------->
      <!----------->

      <!-- TO APPEAR AFTER CONTROL CLICK -->

      <!----------->
      <!-- CTA 6 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 6</span>
        </li>
      </ul>
    </div>
  </div>
  <!--=====================-->
  <!--== ON ARROW DISPLAY -==>  
  <!--=====================-->


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Presently, all six blocks are being displayed at once. I am unsure of the differences between the provided demo and my implementation (aside from the structural elements).

javascripthtmlcssbootstrap-4carousel

Answer №1

the reason is that all the images are contained within a single <div class="item">

try putting them in separate item divs, like this :

<div class="item active">cat 1</div>
<div class="item">cat 2</div>
<div class="item">cat 3</div>
<div class="item">cat 4</div>
<div class="item">cat 5</div>
<div class="item">cat 6</div>


img {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: block;
}

ul {
  display: inline-block;
}

li {
  list-style-type: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <!----------->
      <!-- CTA 1 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="" />
          <span>Test 1</span>
        </li>
      </ul>
    </div>
    <div class="item">
      <!----------->
      <!-- CTA 2 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="" />
          <span>Test 2</span>
        </li>
      </ul>
    </div>
    <div class="item ">
      <!----------->
      <!-- CTA 3 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="" />
          <span>Test 3</span>
        </li>
      </ul>
    </div>
    <div class="item ">
      <!----------->
      <!-- CTA 4 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="" />
          <span>Test 4</span>
        </li>
      </ul>
    </div>
    <div class="item ">
      <!----------->
      <!-- CTA 5 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="" />
          <span>Test 5</span>
        </li>
      </ul>
    </div>
    <div class="item ">
      <!----------->
      <!----------->

      <!-- TO APPEAR AFTER CONTROL CLICK -->

      <!----------->
      <!-- CTA 6 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="" />
          <span>Test 6</span>
        </li>
      </ul>
    </div>
  </div>
  <!--=====================-->
  <!--== ON ARROW DISPLAY -==>  
  <!--=====================-->


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer №2

Your desired functionality has been achieved successfully. I have included a div with the class item.

img{
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: block;
}
ul{
  display: inline-block;
}
li{
  list-style-type: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <!----------->
      <!-- CTA 1 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 1</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 2 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 2</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 3 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 3</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 4 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 4</span>
        </li>
      </ul>
      <!----------->
      <!-- CTA 5 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 5</span>
        </li>
      </ul>
    </div>
    <div class="item">
      <!----------->
      <!----------->

      <!-- TO APPEAR AFTER CONTROL CLICK -->

      <!----------->
      <!-- CTA 6 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src=""/>
          <span>Test 6</span>
        </li>
      </ul>
    </div>
  </div>
  <!--=====================-->
  <!--== ON ARROW DISPLAY -==>  
  <!--=====================-->


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer №3

img{
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: block;
}
ul{
  display: inline-block;
}
li{
  list-style-type: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <!----------->
      <!-- CTA 1 -->
      <!----------->
      <ul class="clearfix">
        <li>
          <img src="https://picsum.photos/200/200?random"/>
          <span>Test 1</span>
        </li>
      </ul>
      </div>
      <!----------->
      <!-- CTA 2 -->
      <!----------->
       <div class="item">
      <ul class="clearfix">
        <li>
          <img src="https://picsum.photos/200/200?random"/>
          <span>Test 2</span>
        </li>
      </ul>
      <div>
      <!----------->
      <!-- CTA 3 -->
      <!----------->
       <div class="item">
      <ul class="clearfix">
        <li>
          <img src="https://picsum.photos/200/200?random"/>
          <span>Test 3</span>
        </li>
      </ul>
      </div>
      <!----------->
      <!-- CTA 4 -->
      <!----------->
       <div class="item">
      <ul class="clearfix">
        <li>
          <img src="https://picsum.photos/200/200?random"/>
          <span>Test 4</span>
        </li>
      </ul>
      </div>
      <!----------->
      <!-- CTA 5 -->
      <!----------->
       <div class="item">
      <ul class="clearfix">
        <li>
          <img src="https://picsum.photos/200/200?random"/>
          <span>Test 5</span>
        </li>
      </ul>
      </div>
      <!----------->
      <!----------->

      <!-- TO APPEAR AFTER CONTROL CLICK -->

      <!----------->
      <!-- CTA 6 -->
      <!----------->
       <div class="item">
      <ul class="clearfix">
        <li>
          <img src="https://picsum.photos/200/200?random"/>
          <span>Test 6</span>
        </li>
      </ul>
      </div>
    </div>
  </div>
  <!--=====================-->
  <!--== ON ARROW DISPLAY -==>  
  <!--=====================-->


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

All six elements are visible here. What seems to be the issue?

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

Removing an element in JSON is resulting in an element that is undefined

Dealing with a JSON Object, I am faced with a challenge where deleting elements results in undefined entries, causing issues in my usage within datatables. Here is my current approach: function dTable(presId){ var allregos = '[{"presId": "a09N0000 ...

javascriptarraysjson

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

htmlcssuser-interface

Retrieve information stored in a component's data variable

After creating a Vue repository using vue init webpack my-app My main.js file looks like this -- // The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue fro ...

javascriptvue.jsvuejs2vue-component

Issue with React Hook Form - frequent failure in submitting the form

I have implemented the useForm hook from https://www.npmjs.com/package/react-hook-form. However, I am encountering some inconsistent behavior where it sometimes works immediately, sometimes requires a page refresh to work, and sometimes doesn't work a ...

javascriptnode.jsreactjsmongodbexpress

Combining multiple conditions with Sequelize in a JOIN statement

Currently, I am attempting to execute a query using Sequelize ORM with a custom join condition. For example: User.findAll({include: [{model: Post, where: {active: true}}] Here is the result of the join condition: INNER JOIN `posts` AS `post` ON `users`.` ...

javascriptnode.jsormsequelize.js

The issue persists with the event listener not responding to input key

Can the Keycode that is pressed during the firing of addEventListener input be retrieved? <p contentEditable="true" id="newTask">New task</p> document.getElementById("newTask").addEventListener("input" ...

javascript

The copyFileSync function is failing to copy the file without generating any error messages

I have developed a JavaScript function running in a nodejs/Electron client to copy a file from the user's flash drive to c:/Windows/System32. The file is copied to enable manual execution from Command Prompt without changing directories. The issue I ...

javascriptnode.jselectron

Issue with vue-template-compiler in Vue.js 3 webpack configuration

I am currently working on integrating vuejs 3 into a project that already utilizes webpack. I have been looking into using vue-loader as part of this process. After consulting the official documentation, I came across the following information: Every new ...

javascriptvue.jswebpackvuejs3vue-loader

Update elements dynamically using JSX

I have an array called data.info that gets updated over time, and my goal is to replace placeholder rendered elements with another set of elements. The default state of app.js is as follows: return ( <Fragment> {data.info.map((index) =&g ...

javascriptreactjsmaterial-uireact-hooksjsx

Creating reactive behavior with a Promise initiated within a constructor - A guide

I am facing an issue with my Thing class. In the constructor, there is an asynchronous operation using fetch. Once the fetch completes, the result is assigned to a field in the Thing object: class Thing { constructor() { this.image = null ...

javascriptvue.jspromisevuejs3

Make sure to declare rest parameters first when using Typescript

I am dealing with a function that takes in multiple string arguments and one final argument of a complex type, which is called Expression. This particular code looks like this in JavaScript: function layerProp(...args) { const fields = args.slice(0, -1) ...

javascriptarraystypescriptrest-parameters

The content spilling out of a Bootstrap 4 row

UPDATE: Here is the link to the javascript fiddle When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in ord ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Send a parameter to a React hook

I am facing an issue with a Component that is using a separate hook. I am unable to pass any value to that hook, which is necessary for my use case. const onEdit = (index: number) => useMediaLinkImage(img => { setNodeImages(imgData => { ...

javascriptreactjsreact-nativewebreact-hooks

Using the spread operator in ES6 allows for arguments to be placed in a non-con

When working in nodeJS, my code looks like this: path = 'public/MIN-1234'; path = path.split('/'); return path.join( process.cwd(), ...path); I was expecting to get: c:\CODE\public/MIN-1234 but instead, I got: `‌publ ...

javascriptnode.jsecmascript-6

"After the document is fully loaded, the Ajax post function is failing to work

I am looking to trigger an Ajax call once my document has finished loading. Here is the code I currently have: <script> $(window).bind("load", function () { getCategories(); }); </script> <script> ...

javascriptjqueryajaxasp.net-mvc-4

Encountering an issue while trying to convert a JSON object into an array of a specific class type

When I receive a JSON object from a service, I want to iterate through this object and populate an array of class types. Below is the code used to call the service: public GetMapData(): Observable<Response> { var path = 'http://my.blog.net ...

javascriptarraysjsonangular

Emphasize the checkbox

In my table, I have radio buttons that should turn the neighboring cell green when clicked. Using JQuery, I added a "highlight" class on $.change event to achieve this effect. However, I encountered an issue where some radio buttons load with the "checked ...

jquerycsshighlight

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

htmlcssangularbootstrap-4border

The scrolling feature in IE 7 with IE 7 standard does not respond to the jquery scroll event, whereas it functions properly in IE8 and IE

I have included an example below which consists of a terms div that contains some terms and conditions as its content. The checkbox is enabled when the user scrolls to the bottom of the div. However, this functionality seems to be not working properly in I ...

jqueryhtmlinternet-explorer

Utilizing numerous await statements within a single asynchronous function

My async function has 3 awaits, like this: const sequenceOfCalls = async(req, res, next) =>{ await mongoQuery(); await apiCall1(); await apiCall2(); } apiCall1 uses response of mongoQuery and apiCall2 uses response of apiCall1. The issue is ...

javascriptnode.jsasync-awaitpromise