Up next in 10
Angular ngx-image-swiper Example to Build Image Swiper Animation With Controls in Browser Using TS
Feb 5, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-image-swiper-example-to-build-image-swiper-animation-with-controls-in-browser-using-ts/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you how to
0:04
integrate this uh image navigation uh in
0:08
a carousel like structure you will see
0:10
this is actually a angular specific
0:12
module which allows you to display
0:14
multiple images if you have inside your
0:18
website inside this nice little
0:21
interface you can we have all these
0:24
controls out there we can navigate to
0:26
the next image you can
0:28
see we have all these controls are out
0:31
there so the actual module name is
0:35
ngx uh image swiper you can actually
0:39
swipe the images by holding your mouse
0:41
here you will see that if I click it or
0:44
swipe it inside mobile devices the
0:46
images will display in a carousel like
0:48
structure so there is a specific angular
0:50
package for this if you just go to
0:53
npmjs.com and there's a module here just
0:57
wait let me open the zoomit tool so that
1:00
I
1:01
can zoom in on a particular element
1:04
inside so if you just go to this website
1:07
and just search for this package ngx
1:10
image swiper this is actually the name
1:12
of the
1:14
module
1:17
so the command is very simple you just
1:20
actually first of all install this it's
1:23
a fairly new package I've already
1:25
installed it and also I have written a
1:26
step by-step blog post on my website as
1:29
well giving you a step-by-step
1:31
instruction holding the full example
1:33
code of this so if you need the full
1:36
example code you can go to the
1:37
description link where I will paste all
1:39
the example code so first of all let me
1:42
delete everything and start from
1:45
scratch so the very first thing we need
1:47
to do we need to go to this file here
1:49
app. module. typescript file and here
1:52
you need to register or configure this
1:54
module by adding this import statement
1:57
so what you do to do you just need to
2:00
add this import statement import ngx
2:03
image swiper module which will be coming
2:05
from this package ngx image swiper and
2:08
then you go to the Imports array and
2:11
simply add this module in the Imports
2:14
aray that's all the configuration code
2:16
is required now you can close this file
2:19
and right inside this app. component.ts
2:21
file you first of all paste all the
2:24
images that you will show and there is
2:27
in this swiper config object that you
2:29
need to write
2:31
here so this will be of type
2:34
ngx
2:38
swiper
2:42
config so here you will initialize the
2:45
options for the swiping so this ngx
2:49
swiper config will be coming from this
2:51
ngx image swiper automatically it is
2:53
imported and then if you want the
2:55
navigation you will set it to true then
2:58
if you also want the navigation place
3:00
placement inside it you will put inside
3:02
here if you need the pagination you will
3:05
set it to true and if you need the
3:07
pagination placement you will say
3:09
outside so these four options are
3:11
supported right here from this module so
3:13
we put this options after that we
3:16
initialize all the images that needs to
3:18
be displayed these images can be coming
3:21
from a database API from a URL as well
3:24
so I'm just taking an example here where
3:26
I'm taking these images from pexels.com
3:28
I just I pasted the links right here it
3:31
can even be your local images as well if
3:34
you want to display inside your website
3:37
now we can go to this app. component.
3:39
HTML file your template file and right
3:42
here we will use this
3:45
directive we will simply say ngx image
3:49
swiper
3:51
demo and after this we
3:54
will
3:55
have a button right here
4:00
and we will B A you first of all show
4:04
this swiper config do
4:09
navigations so it will basically show
4:11
the navigation control here so
4:14
conditionally using the tary operator so
4:17
you will see that so we see this button
4:22
appearing and then to show the images we
4:25
actually use this uh directive which is
4:30
your ngx image swiper so you basically
4:33
bind this inside the div tag which is
4:35
image swiper and right here we use this
4:38
directive ngx image
4:41
swiper opening and the closing tag and
4:44
here you will Define your images this
4:46
actually takes a parameter here which is
4:48
your configuration parameter so you
4:50
simply pass the configuration parameter
4:53
swiper
4:56
config and then we also pass the series
4:58
of images which we have declared inside
5:00
the array as soon as you do this guys
5:02
you will see the images being displayed
5:05
you will see these controls you will see
5:08
these controls there's pagination
5:09
controls as well and you can even swipe
5:12
it as well so in this way you can
5:14
display these images in a nice little
5:16
swiping menu and we can even bind a on
5:20
click listener so whenever you click any
5:22
individual image you can bind this image
5:24
click
5:25
function image clicked so you basically
5:28
pass the event right here to this
5:30
function so we customize it we basically
5:33
put this custom function so when you
5:35
click the individual image we are
5:36
binding this function so what we can do
5:38
right here we can go to the typescript
5:41
code and we can simply Define this
5:43
function so here you can do anything
5:46
once the user clicks the image I'm just
5:47
console logging a simple line that image
5:49
clicked so now what happens if you click
5:52
the image in the console you will see
5:54
that image clicked and it will put zero
5:58
so again if you you click this you will
6:00
see that so in this way guys you can
6:03
integrate this module to show images
6:06
swiping menu in a carousel like
6:09
structure inside angular you can use
6:11
this module ngx image swiper for the for
6:14
for the full source code you can go to
6:16
my description link where I have written
6:17
a step by-step blog post so thank you
6:20
very much guys for watching this video
6:22
and also check out my website as well
6:24
free mediat tools.com uh which contains
6:27
thousands of tools regarding audio video
6:29
and image and I will be seeing you guys
6:31
in the next video
#Computers & Electronics
#Internet & Telecom