Create a carousel with a zoom effect in Angular

Published in

CodeX

5 min readMay 23, 2022

Many times when we are creating web apps for shopping, food, and online courses and the list continues, we commonly come across the need to have a carousel with all the images/items and it also desired that the images/items get zoomed when we hover over them.

In this blog, we will learn how to create a responsive carousel with an awesome zoom effects like that of Amazon Prime and Netflix in Angular. The Final carousel is going to look something like this.

Let's start by creating a basic angular app using the following command.

→ ng new responsive-carousel
→ cd responsive-carousel
→ ng serve

Ta-da you have your basic angular app ready. Now let’s create our carousel, we will be using angular-responsive-carousel for creating a responsive carousel. let's add it to our dependencies by using the following command.

→ npm i angular-responsive-carousel

Now import the carousel in app.module.ts file the file would look something like this after adding the package.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';import {IvyCarouselModule} from 'angular-responsive-carousel';@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    IvyCarouselModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now let's start creating our responsive carousel by using some cool images from pixabay. I’m creating a carousel with 10 cards for demonstration purposes feel free to use any number of cards. My files after adding code for the carousel look like this.

app.component.html

<div id="heading">
  Carousel
</div>
<div class="carousel-outer" >
  <carousel class="row" [cellsToShow]=nos [cellsToScroll]=nos  [margin]=20 [height]=240 >
    <div class="col-md-1 carousel-cell" *ngFor="let src of list_of_images,let i = index" >
      <div class="grid-box">
        <img class="image" [src]="'assets/images/'+src" alt="image">
      </div>
    </div>
  </carousel>
</div>

app.component.ts

import { Component, OnInit  } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})export class AppComponent {title = 'scroll';nos=5;ngOnInit(): void {}list_of_images =['a.jpg','b.webp','c.webp','d.webp','e.webp','f.jpg','g.webp','h.webp','i.webp','j.webp']}

app.component.css

#heading {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
}.carousel-outer {
    padding: 0 0 50px;
    position: relative;
    margin-top: 100px;
}.carousel-cell {
    overflow: visible !important;
    z-index: 9 !important;
}.grid-box {
    position: relative;
    overflow: hidden;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}.image {
    width: 100%;
    border-radius: 5px;
    height: 165px ;
}

Now as we have a basic yet good-looking carousel all tha→ Angular- Carousel with zoom effect
https://medium.com/codex/create-a-carousel-with-awesome-zoom-effects-like-that-of-amazon-prime-and-netflix-in-angular-940d5c6333cd
→ Angular- OneDrive picker
https://medium.com/@sankethdesuwar5/one-drive-picker-in-angular-1729064fbca9nks to the angular community, let’s start building the zoom effect we want to achieve, we will try to do this by using CSS. We will use the CSS transform property to achieve this. We will scale the image by 1.25X to get the zoom effect. The CSS file will look something like this after doing the needy.

app.component.css

#heading {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
}.carousel-outer {
    padding: 0 0 50px;
    position: relative;
    margin-top: 100px;
}.carousel-cell {
    overflow: visible !important;
    z-index: 9 !important;
}
.carousel-cell:hover{
    z-index: 999 !important;
}.grid-box {
    position: relative;
    overflow: hidden;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}.grid-box:hover{
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -o-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    transform-origin: center top;
}.image {
    display: block;
    width: 100%;
    object-fit: cover !important;
    border-radius: 5px;
    height: 165px !important;
}.image:hover {
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -o-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    transform-origin: center top;
    border-radius: 5px;
}

Now your carousel will look something like this on hover.

Isn’t it amazing, how easily with some CSS code we made elements of the carousel zoomable?

But can you find something odd in the above video?

Yes, you got it! the elements in the corner are getting cropped when we zoom them. So let’s fix them, to do so we will have to modify our HTML file in such a way that the first element in every scroll should zoom from the left edge as its fixed edge and the last element in every scroll should zoom from the right edge as its fixed edge.

Let's achieve this by using the CSS transform-origin property along with some code to assign first and last classes to the respective carousel blocks. The files will look something like this after doing the needy.

app.component.html

<div id="heading">
  Carousel
</div>
<div class="carousel-outer" >
  <carousel class="row" [cellsToShow]=nos [cellsToScroll]=nos  [margin]=20 [height]=240 >
    <div class="col-md-1 carousel-cell" *ngFor="let src of list_of_images,let i = index" [ngClass]="{'first-item': i == 0 || i%nos == 0, 'last-item': i != 0 && i%(nos-1) == 0}">
      <div class="grid-box">
        <img class="image" [src]="'assets/images/'+src" alt="image">
      </div>
    </div>
  </carousel>
</div>

app.component.css

#heading {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
}.carousel-outer {
    padding: 0 0 50px;
    position: relative;
    margin-top: 100px;
}.carousel-cell {
    overflow: visible !important;
    z-index: 9 !important;
}
.carousel-cell:hover{
    z-index: 999 !important;
}.grid-box {
    position: relative;
    overflow: hidden;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}.grid-box:hover{
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -o-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    transform-origin: center top;
    border-radius: 5px;
}.image {
    width: 100%;
    border-radius: 5px;
    height: 165px ;
}.first-item .grid-box:hover{
    transform-origin: left top;
}.last-item .grid-box:hover{
    transform-origin: right top;
}

Hurray! we are done with the task, Now we have an awesome carousel that we can use in any angular application to display our list of items, Cheers.

Do check my other blogs.
→ Angular- Carousel with zoom effect
https://medium.com/codex/create-a-carousel-with-awesome-zoom-effects-like-that-of-amazon-prime-and-netflix-in-angular-940d5c6333cd
→ Angular- OneDrive picker
https://medium.com/@sankethdesuwar5/one-drive-picker-in-angular-1729064fbca9

Follow me on Twitter at https://twitter.com/Sanketh38731692

IMPORTANT LINKS

GITHUB REPO LINK: https://github.com/sanketh5/Angular-ResponsiveCarousel

Create a carousel with a zoom effect in Angular

Written by sanket desu