Image slideshow

-- HikaShop version -- : 4.6.0
-- Joomla version -- : 4.1.5
-- PHP version -- : 8.0

Hi,
my client ask me if we can have another type of image slideshow when on a product details.

The problem is the arrow to switch to the others images. Actually, only a little arrow on bottom.
Is there a way to have arrows in the middle of the image slideshow ?

Hi,
Thank you, but it dos not work.
If i check with the console, i see for the arrow this code :

#sb-nav-previous

#sb-nav-next

Hi thefbi,

If you want to keep using the ShadowBox popup, here below is a CSS solution which replaces the background images with FontAwesome icons and makes everything larger, so that users have it easier:

#sb-info, #sb-info-inner {
	height: 36px;
	line-height: 36px;
}
#sb-counter {
	font-size: 16px;
	font-weight: bold;
}
#sb-nav {
	height: 36px;
}
#sb-nav a {
	font-family: "Font Awesome 5 Free";
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-size: 24px;
	height: 36px;
	width: 36px;
	margin-left: 5px;
	line-height: 36px;
}
#sb-nav-close, #sb-nav-next, #sb-nav-play, #sb-nav-pause, #sb-nav-previous {
	background-image: none;
}
a#sb-nav-close {
	font-size: 29px;
	margin-left: 15px;
}
#sb-nav-close:before {
	content: "\f00d";
}
#sb-nav-next:before {
	content: "\f04e";
}
#sb-nav-play:before {
	content: "\f04b";
}
#sb-nav-pause:before {
	content: "\f04c";
}
#sb-nav-previous:before {
	content: "\f04a";
}

Thank you, but that dos not work.
And the goal is to have this arrows at the middle of the image.

Regards

Hello,
Here it is, but you have to login (site under construction) :

Thank you very much, it is now almost perfect.
I created 3 icons in svg to replace the existing ones and play with the size.

I also hid the image count. I enlarged the width of the info box and put the left image on the left instead of the countdown.
I put below the code I used, please tell me if it is right ?
I still have one point to fix, I need to rearrange the icons, because on mobile, they go out of the frame, but it should be easy.

On the other hand, is it possible to make the close icon go up like on the screenshot? If not, maybe I prefer to hide it.
The idea is to have the left and right icons, perfectly aligned on the image on each side.

div#sb-container div#sb-info {
    z-index: 9999;
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
}
#sb-info, #sb-info-inner {
  height: 30px !important;
}
#sb-nav a {
  display: block;
  float: right;
  height: 25px !important;
  width: 25px !important;
  margin-left: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
}
#sb-nav-next {
    background-image: url(https://tango-express.ch/images/icones/icone-fleche-droite.svg) !important;
}
#sb-nav-previous {
    background-image: url(https://tango-express.ch/images/icones/icone-fleche-gauche.svg) !important;
   float: left !important;
}
#sb-nav-close {
    background-image: url(https://tango-express.ch/images/icones/icone-croix.svg) !important;
}
#sb-nav {
  float: none !important;
  height: 16px;
  padding: 2px 0;
  width: 100% !important;
}
#sb-counter {
  display: none !important;
}

Hello and thank you, but i cant achieve this.
Can you please take a look at my short video to understand my problem : www.screencast.com/t/tu1c1Yzt

Regards

OK, thank you, i see.
But the problem with the 400px from top is the responsive layout.
Depending of the screen size, the arrow are not fixed in the middle...

And at each image switch, the arrows goes to top and come back. This is not really good. But i thing i will let like the last modification. It is pretty perfect, so i thing it will be ok.

Hi,
OK, thank you, i will take a look.

HI,
I have again a "little" question.
Is it possible to have the slider not stop at the end of the thumbnails ?
I mean, the possibility to go to the left at the first image, and to continue (return to the first) at the end ?

Regards

OK, thank you.