Display a variety of images all in one slider page effortlessly with the ngb-carousel feature

I'm currently utilizing Angular 6 and ng-bootstrap to implement a carousel feature on my website.

Although the carousel is functioning correctly, I am facing an issue where only one image is being displayed in each slide instead of four images per slider. Here is the data retrieved from the API response:


games= [{"title_id":1,"title_name":"MIssion Impossible","title_img":"https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"}]},{"title_id":2,"title_name":"Matrix","title_img":"https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":3,"title_name":"Avengers","title_img":"http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":4,"title_name":"Stargate SG-1","title_img":"https://image.tmdb.org/t/p/w300_and_h450_bestv2/rst5xc4f7v1KiDiQjzDiZqLtBpl.jpg","genres":[{"id":1,"name":"Action"},{"id":5,"name":"Drama"},{"id":2,"name":"Adventure"},{"id":9,"name":"Sci Fi"}]},{"title_id":5,"title_name":"Scooby Doo","title_img":"https://images-na.ssl-images-amazon.com/images/G/01/aplusautomation/vendorimages/1cdd3ea2-f14f-416b-9aaa-644a9a01ad8c.jpg._CB321085566_.jpg","genres":[{"id":1,"name":"Action"},{"id":10,"name":"Thriller"},{"id":6,"name":"Fantasy"}]}];

This is how my component.html code looks like:

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide *ngFor="let image of games" style="">
        <div class="" style="">
            <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                <img class="" src="{{image.title_img}}" width="" >
            </div>
        </div>
    </ng-template>
</ngb-carousel>

Currently, only one image is being displayed per slide. You can view the screenshot here: https://i.sstatic.net/OI92U.png

I also tried using static images without success. Here is the code snippet:

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide  style="">
        <div class="">
            <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
            <img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
            <img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
    <ng-template ngbSlide  style="">
        <div class="">
            <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
            <img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
            <img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class=
            "img-responsive" style="float:left">
        </div>
    </ng-template>
</ngb-carousel>

The result can be seen here: https://i.sstatic.net/YKBHT.png

On mobile devices, the images are displayed below each other which is not the desired outcome. The aim is to display only one image at a time and have the next image appear upon clicking the arrow navigation button.

You can see how it appears on mobile here: https://i.sstatic.net/HqrEY.png

javascriptcsscarouselangular6ng-bootstrap

Answer №1

Consider this as a potential solution :

Distinguishing Between Desktop and Mobile Versions:

Segregate the desktop version from the mobile version, utilizing ngb-carousel for each version and choosing one through an *ngIf statement. The *ngIf condition evaluates the variable mobile, which is set by (see the snippet of HTML below):

ngOnInit() {
  if (window.screen.width === 360) { // 768px portrait
    this.mobile = true;
  }
}

Further information can be found in this particular question.

Utilizing a Slider

For the mobile variant, stick with your current implementation (illustrated below)

However, for the desktop version containing multiple images:

Divide your array into a multidimensional array structure (one dimension for slides and another for images). For instance, if there are 2 slides consisting of 3 images each, your data structure should be a 2*3 matrix.

this.games = ["a", "b", "c", "d", "e"];
this.gamesFormatted = [];
var j = -1;

for (var i = 0; i < this.games.length; i++) {
    if (i % 3 == 0) {
        j++;
        this.gamesFormatted[j] = [];
        this.gamesFormatted[j].push(this.games[i]);
    }
    else {
        this.gamesFormatted[j].push(this.games[i]);
    }
}

To showcase the carousel, incorporate a nested loop:

<div *ngIf="games">
    <!-- Mobile section : one image per slide -->
    <ngb-carousel *ngIf="mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
        <ng-template ngbSlide *ngFor="let image of games">
            <div class="" style="">
                <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                    <img class="" src="{{image.title_img}}">
                </div>
            </div>
        </ng-template>
    </ngb-carousel>

    <!-- Desktop section : multiple images per slide -->
    <ngb-carousel *ngIf="!mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
        <ng-template ngbSlide *ngFor="let group of gamesFormatted">
            <div class="" style="" *ngFor="let game of group">
                    <img class="" src="{{game.title_img}}">
            </div>
        </ng-template>
    </ngb-carousel>
</div>

The correctness of the HTML component hasn't been verified yet, so it may require enhancements.

Answer №2

Have you attempted it in this manner?

`<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide  style="">
    <div class="">
      <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
    </div>
    <div class="">
      <img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
    </div>
    <div class="">
      <img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
     </div>
  </ng-template>
</ngb-carousel>
`

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

Exploring the functionality of Radar Chart within a React component

Within the index.html file that is being utilized, there exists a javascript code specifically designed for the chart function. <script src="js/plugins/chartJs/Chart.min.js"></script> var radarData = { labels: ["In Perso ...

javascriptreactjschartschart.js

Display Default Image in Vue.js/Nuxt.js when Image Not Found

I'm currently working on implementing a default image (placeholder image) for situations where the desired image resource is not found (404 error). I have a dictionary called article which contains a value under the key author_image. Although the stri ...

javascriptvue.jsvuejs2nuxt.js

Angular checkbox filtering for tables

I have a table populated with data that I want to filter using checkboxes. Below is the HTML code for this component: <div><mat-checkbox [(ngModel)]="pending">Pending</mat-checkbox></div> <div><mat-checkbox [(ngModel ...

javascriptangulartypescriptangular-material

Anticipated a task or method invocation but encountered an expression instead no-unused-expressions (line 14/15)

I can't seem to figure out the issue with my code. Despite trying to fix it multiple times by adjusting lines 14/15, I keep encountering the same error. If anyone has any insights or suggestions on what might be causing this problem, I would greatly a ...

javascriptreactjs

What is the complete pathway in CSS?

Consider this scenario: within my CSS file, there is a line of code used to display an image - specifically, a label icon located in the sidebar. background-image:url(../assets/images/icons/arrow_state_grey_expanded.png); However, due to its relative pat ...

cssrelative-pathfilepathcodeigniter-2

Modify the paragraph's class upon clicking the radio button

I have been struggling with changing the color of <p> based on the radio button selected using two classes, red and blue. However, for some reason, it's not working as expected. If anyone has any insights or suggestions on how to fix this issue ...

javascripthtmlcssradio-buttondom-events

What is the process for filtering records by a date greater than in the Material Table?

How can I filter the Material table by date values greater than the current value? I've been able to filter by exact date so far, but I need to filter all values that are greater than or equal to the current value in the table. <TableMaterial ...

javascriptreactjsdatepickermaterial-uimaterial-table

The default export of Nuxt, referred to as 'mod', could not be located

Using Nuxt with Typescript, I have created a custom component as shown below: <template> <div class="field"> <label class="label" v-if="typeof label !== 'undefined'">{{ label }}</label> <div class=" ...

javascriptvue.jsnuxt.js

There are no markers or popups currently displayed on the map

Utilizing the ngx-leaflet plugin for leaflet, I have established the base layers and integrated a listener for the leafletMapReady event. Within my handler, I attempted to add both a marker and a customized popup. The handler code is displayed below: init ...

javascriptangularleafletngx-leaflet

Assistance needed for jQuery functions running too early

Within my click function, I am setting certain flags and then calling two functions. However, I want these two functions to execute sequentially in order after the flags have been set. jQuery("#element").click(function(e){ var op = jQuery("#box" ...

javascriptjquery

Please wait for the window to finish formatting before attempting to print

I'm currently using the javascript code below to pass an element ID to a method. This method then formats that particular ID in a separate window and prints it. However, I've encountered an issue where the print dialogue box opens up before the w ...

javascriptgetelementbyid

A challenge in web design: tackling cross-browser color discrepancies

I have implemented CSS code in an HTML page to define the color values of H1 and H2 elements. <style type="text/css"> img {border-style: none;} H1 {color: "#33CCFF"} H2 {color: "#33CCFF"} </style> While this setup works well on Internet Explo ...

htmlcsscolorscross-browser

Is it possible to add information to the form data object?

When I send an image to the server using form data, everything seems fine until I try to add data from a crop plugin. Here is the code snippet: //create form data from form var formData = new FormData($('#my-form')[0]); //append the image formD ...

javascriptphpjqueryajax

The Three.js loading bar fails to disappear after the model has finished loading

I have created a page that is inspired by this example and have incorporated relevant lines from the webgl_material_bumpmap example to implement a loading progress Dom Element. You can view the page (temporarily) here. If the information provided below is ...

javascriptthree.js

Floating DIVs wrapped in a responsive layout

I can't help but wonder if I have a layout like this: <div class="container"> <div class="left"> Left </div> <div class="right> Right </div> </div> Changing the view port to 320 pixels requires the right div to ap ...

cssmobilewebresponsive-design

Guidelines for implementing socks authentication in webdriverio

I'm facing an issue with enabling SOCKSv5 authentication in my webdriverio application. Unfortunately, the current configurations don't seem to be working. Here are the configurations I've tried so far: Setting manually using firefox-prof ...

javascriptseleniumselenium-webdriverwebdriver-iofirefox-profile

What is the role of the CSS URL property in web design?

Occasionally, I enjoy the challenge of "reverse engineering" websites, especially those with a complex design. By dissecting these sites, I aim to gain insight into the techniques employed by other developers. Recently, my curiosity led me to analyze the ...

css

Next.js Server Error: ReferenceError - 'window' is undefined in the application

I am currently in the process of integrating CleverTap into my Next.js application. I have followed the guidelines provided in the documentation Web SDK Quick Start Guide, however, I encountered the following issue: Server Error ReferenceError: window is ...

javascriptreactjsnpmnext.jsclevertap

Unlock the power of Angular JS to display dynamic content effortlessly

My experience with AngularJs is very limited. In one of my projects, I need to display dynamic content on a page that changes based on the database values retrieved via an HTTP GET request. Before implementing the entire functionality, I decided to test i ...

javascriptangularjs

When two dynamically sized divs are contained within a parent div with a maximum height, the second div should be positioned at the bottom

My outer div has a maximum height of 800px. Depending on the results of a MySQL query, there could be one or two inner divs nested within the outer div. The second inner div must always be fixed to the bottom of its parent. I know how to achieve this usin ...

javascriptphpcss