Different ways to incorporate the div element with text content as opposed to images in ngx-slick-carousel

Question

Different ways to incorporate the div element with text content as opposed to images in ngx-slick-carousel

I am looking to incorporate multiple <div> elements with content into the ngx-slick-carousel in my Angular 12 application. Currently, the carousel is displaying placeholder images and I am unsure of how to replace these images with div elements.

Here is the code snippet I am currently using:

app.component.html

<ngx-slick-carousel class="carousel" #slickModal="slick-carousel"
                    [config]="slideConfig" 
                    (init)="slickInit($event)"
                    (breakpoint)="breakpoint($event)"
                    (afterChange)="afterChange($event)"
                    (beforeChange)="beforeChange($event)">
     
     <div ngxSlickItem *ngFor="let slide of slides" class="slide"><img src="{{ slide.img }}" alt="" width="100%"></div>

</ngx-slick-carousel>

app.component.ts

  slides = [
    {img: "https://via.placeholder.com/600.png/021/fff"},
    {img: "https://via.placeholder.com/600.png/321/fff"},
    {img: "https://via.placeholder.com/600.png/422/fff"},
    {img: "https://via.placeholder.com/600.png/654/fff"}
  ];
  slideConfig = {"slidesToShow": 2, "slidesToScroll": 1};

I would appreciate any guidance on how I can implement div elements instead of image URLs for the carousel. Thank you.

angular typescript slick.js

Answer 1

Answer №1

You have the flexibility to include multiple div elements within the carousel instead of just images.

For instance, you can insert two separate div elements and display only one at a time.

To achieve this, update your slideConfig object in your TypeScript file as shown below.

  slideConfig = {
              "slidesToShow": 1, 
              "slidesToScroll": 1, 
              "arrows": false
            };

Next, within the <ngx-slick-carousel> tag in your HTML file, add two individual ngxSlickItem components without using *ngFor.

 <ngx-slick-carousel 
              class="carousel" 
              #slickModal="slick-carousel" 
              [config]="slideConfig">

      <div ngxSlickItem class="slide">
        <h1>First slide</h1>
      </div>

      <div ngxSlickItem class="slide">
        <h1>Second slide</h1>
      </div>

 </ngx-slick-carousel>

Now, you can easily navigate using the previous and next buttons.

<button (click)="slickModal.slickPrev()">Previous</button>
<button (click)="slickModal.slickPause()">Pause</button>

If you want to add more than two div elements, simply insert additional ngxSlickItem components with divs and adjust the value of slidesToShow in slideConfig according to your needs.

Answer 2

You have the flexibility to include multiple div elements within the carousel instead of just images.

For instance, you can insert two separate div elements and display only one at a time.

To achieve this, update your slideConfig object in your TypeScript file as shown below.

  slideConfig = {
              "slidesToShow": 1, 
              "slidesToScroll": 1, 
              "arrows": false
            };

Next, within the <ngx-slick-carousel> tag in your HTML file, add two individual ngxSlickItem components without using *ngFor.

 <ngx-slick-carousel 
              class="carousel" 
              #slickModal="slick-carousel" 
              [config]="slideConfig">

      <div ngxSlickItem class="slide">
        <h1>First slide</h1>
      </div>

      <div ngxSlickItem class="slide">
        <h1>Second slide</h1>
      </div>

 </ngx-slick-carousel>

Now, you can easily navigate using the previous and next buttons.

<button (click)="slickModal.slickPrev()">Previous</button>
<button (click)="slickModal.slickPause()">Pause</button>

If you want to add more than two div elements, simply insert additional ngxSlickItem components with divs and adjust the value of slidesToShow in slideConfig according to your needs.

Different ways to incorporate the div element with text content as opposed to images in ngx-slick-carousel

Answer №1

Similar questions

Is there a way to determine if a route, or any of its nested routes, are currently active

Oops! The API request was denied with error code 401 - Unauthorized in React

Challenges with formArrayName in Angular can be tricky to navigate

Problem with the placement of Google autocomplete dropdown

What is the best way to provide JSON data instead of HTML in Angular?

angular reactive form: communicate between child and parent components

Determining if a component is nested within itself in Angular 6 is a crucial task

Use a mock HTTP response instead of making an actual server call in Angular 4

shifting the angular directives to alternate the bootstrap class of hyperlinks

The h2 class does not appear to be taking effect when loading dynamically

Retrieve functions with varying signatures from another function with precise typing requirements

What is the reason behind the error Generic indexed type in Typescript?

Why is it that the HttpClient constructor in Angular doesn't require parameters when instantiated through the constructor of another class, but does when instantiated via the 'new' keyword?

Is it possible to implement a redirect in Angular's Resolve Navigation Guard when an error is encountered from a resolved promise?

Is Axios the sole option for API calls when utilizing Next.js with SSG and SSR?

Compilation of TypeScript in MSBuild is failing during the Docker build process, while it is successful in the Azure pipeline

How should dynamic route pages be properly managed in NextJS?

ngIf not working properly with the updated value of [(ngModel)]

Guide to setting data types for [key, value] pairs within a forEach iteration

Error encountered while attempting to build Ionic 5 using the --prod flag: The property 'translate' does not exist on the specified type