Creating a responsive carousel that shows a portion of the next and previous items

I am currently facing an issue with my carousel where it is not responsive for anything above mobile size. I have provided the code below:

<style>
        .item img:first-child,
        .item img:last-child {
            display: none;
        }
        /* Small devices (tablets, 768px and up) */
        @media (min-width: 768px) {
            .item img {
                float: left;
                /*width: 600px;*/
            }
            .item img:first-child,
            .item img:last-child {
                display: block;
            }
            .item.active {
                overflow: hidden;
                margin: 0 -546px;
            }
        }
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -434px;
            }
        }
        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: 1200px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -427px;
            }
        }

        .carousel-inner .active.left { left: -33%; }
        .carousel-inner .next        { left:  33%; }
        .carousel-inner .prev        { left: -33%; }

    </style>

<div class="container-fluid no-pad">
        <div class="row">
            <div class="col-lg-12 no-pad">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div align="center" class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                    </div>
                    <!-- Left and right 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>
            </div>
        </div>
    </div>

My goal is to make the carousel shrink by using the img-responsive BS class, but it is not changing in size as expected.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

This revised CSS code should meet your needs with more simplicity:

.item img {
  float:left;
  max-width:33.33% !important;
}

@media (max-width: 768px) {

  .item img {
    max-width:100% !important;  
   }

  .item img:first-child,
  .item img:last-child {
    display: none !important;
  }

}

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

View the JSFiddle output here.

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

Tips for successfully passing arguments to an arrow function in JavaScript

I'm currently working on a react component and I need to call the same arrow function with different arguments. However, I'm struggling with how to pass these arguments and it's making me question whether or not it's even possible. fu ...

javascriptreactjs

Using JS regular expressions to only select anchor (a) tags with specific attributes

When trying to select a link tag (a) with a specific data-attr, I encountered an issue. I currently use the following regex pattern: /<a.*?data-extra-url=".*?<\/a>/g. However, I noticed that this selection goes wrong when there are no line br ...

javascripthtmlregex

Having difficulties generating a heatmap with FusionCharts in a React environment

I'm attempting to generate a heatmap in my React project using FusionCharts, but I'm encountering some obstacles. Below is the code snippet: import React from 'react'; import FusionCharts from 'fusioncharts'; import Charts fr ...

javascriptreactjsfusioncharts

Is there a way to dim and deactivate a button after it has been clicked once?

Hello, I am attempting to disable and grey out a button after it has been clicked once in order to prevent the user from clicking it again until they refresh the page. I hope my question is clear enough and that you can understand me. Below is the HTML cod ...

javascripthtml

A guide on sending arrays from javascript to a Laravel controller through axios

Currently, I am utilizing Laravel 5.4 and Vue 2 to manage my data. I am facing an issue where I need to call a controller method using axios while passing two arrays. These arrays are crucial for making database requests in the controller and retrieving ne ...

javascriptarrayslaravelvue.jsaxios

Guide on sending PHP array to jQuery using AJAX with JSON?

Currently, I am working on building a calculator that utilizes ajax in jQuery to send values to a PHP file and then receive the results back in jQuery. While I have accomplished getting one result returned successfully, my goal is to have two separate resu ...

phpjqueryajaxjson

What is the best way to create a function that can toggle the visibility of multiple div elements simultaneously?

As a novice, I decided to challenge myself by recreating LinkedIn's layout design. One of the requirements was implementing a function to toggle menus when clicking on a button. Initially, I successfully achieved this task by following the example on ...

javascripthtmlshow-hide

Hidden Angular NgbDatepicker panel

I am currently in the process of setting up a vertical stepper that includes a NgbDatepicker. However, I have encountered an issue where the datepicker appears to be partially hidden by the next step, as illustrated below. https://i.sstatic.net/h9nDK.png ...

cssangulardatepickerng-bootstrap

The JsTree-grid is failing to show the information

I'm currently using the JsTree Ajax lazy load functionality along with JsTree-grid to showcase my data. However, I've encountered a problem when attempting to display the data in the second column using JsTree-grid. Here is a snippet of the JSON ...

javascriptphpjqueryajaxjstree

Scroll the page to bring the div to the top position

Currently working on a web page that consists of divs with varying heights and text inside them. I would like to implement a feature where clicking on the text within a div automatically scrolls the page so that particular div is positioned at the top of t ...

javascripthtmljquerycss

Issues arise when attempting to enforce type-safety in TypeScript while using the JSON.parse

Is it possible that type-safety is compromised in TypeScript when dealing with JSON parsing? I should be triggering an error, but I'm not: interface Person { name: string } const person: Person = somePossibleFalsey ? JSON.parse(db.person) : undefi ...

javascriptjsontypescripttype-safety

How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expect ...

javascriptjqueryhtmlcss

Creating a clean and modern design with Bootstrap 4 by applying bottom borders solely to the

I need to create a sidebar with a bottom border after each li element, except the last one. However, I'm facing an issue with Bootstrap 4 where using border-0 removes all borders on list-group-items. I've tried editing it via CSS but can't s ...

htmlcsstwitter-bootstrapsassbootstrap-4

React Hooks encountering issues with keydown/up events functionality

Currently, I am in the process of implementing arrow-based keyboard controls for a game that I have been developing. In order to stay updated with React, I decided to utilize function components and hooks. To showcase my progress, I have put together a dem ...

javascriptreactjsreact-hookskeyboard-events

Keep the HTML video link out of sight in the Control Center on iOS devices

Looking for a way to conceal the video URL from appearing in the iOS Control Center, can anyone provide a JavaScript or HTML code solution? https://i.sstatic.net/NI79O.png ...

javascripthtmliosasp.net

Tips for capturing a photo using the webcam and transforming it into an image file

I am currently developing a facial recognition system, utilizing the Kairos API. This API enables me to upload an image and identify if there is a face present or not. However, my goal is to implement a button event that can use a webcam to capture a live ...

javascriptphphtmlajax

Setting up Firebase and Vue: Best practices for initializing Firebase and Vuefire

I am encountering an issue while setting up Vuefire and Firebase in my application. The error that I see in the console is: FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). at initializeApp (webpack ...

javascriptfirebasevue.jsvuefire

Warning: The package installed is in need of jQuery version greater than 1.8, but it has not been installed. You will need to manually install the required peer dependencies to ensure proper functionality

npm WARNING: [email protected] needs jQuery@>=1.8 as a peer dependency, but it is not installed. You need to manually install the peer dependencies. Every time I run something on npm, I encounter the above error message. How can I resolve this iss ...

javascriptphpjquerynpmtrumbowyg

Tips on how to ensure a function in jQuery completes before executing another function

My query relates to a div called "#ImageBingingDiv" that is initially set to display:none. I use a fadeIn effect and then adjust the HTML content to include an image. However, when trying to add elevateZoom to the image tag, it doesn't work as intende ...

jqueryhtmlwait

Exploring nested elements in jQuery

<div id="main"> <div id="1"> <div>contents..</div> <div>contents..</div> </div> <div id="2"> <div>contents..</div> <div>contents..</div> </div> <div id="3"> ...

javascriptjquery