Gallery arrows not matching Demo behavior

iorbita

Hi,
the arrows in the image gallery for the rooms don't match what I see in your template demo. In fact, the arrows are treated as buttons on the downloaded template, whereas in your demo they are treated as links. Furthermore, the arrows disappear when the cursor is not over the image, there's a :hover effect in your demo that I don't have in the downloaded templates.

I would like the navigation to work as it does in your demo. Could you please tell me how to change this effect?

Thanks,
Lorenzo
Demo Template

JA Resort for Joomla 5 (quickstart package)

saguaros

Hi Lorenzo,

The new version of Solidres forces to use Bootstrap 5 which changed the links to the buttons and we can't change this.

You can use the following CSS rule to style that buttons alike our demo site:

button.carousel-control-prev, button.carousel-control-next {opacity:0;}
#solidres .carousel:hover .carousel-control-prev,
#solidres .carousel:hover .carousel-control-next{
    opacity: 1;
}
button.carousel-control-prev{
    position: absolute;
    top: 52%;
    left: 15px;
    width: 25px;
    height: 25px;
    margin-top: -20px;
    font-size: 35px;
    font-weight: 100;
    line-height: 18px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.5);
    border: 2px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    filter: alpha(opacity=50);
}

button.carousel-control-next{
    position: absolute;
    top: 52%;
    right: 15px;
    width: 25px;
    height: 25px;
    margin-top: -20px;
    font-size: 35px;
    font-weight: 100;
    line-height: 18px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.5);
    border: 2px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    filter: alpha(opacity=50);
}

Regards

iorbita

Hi Saguaros,
does that mean that this template uses an older version of Bootstrap? Which version of Bootstrap is used on this template?

Anyway, there is a problem with your code: the button remains displayed after clicking on it and when the mouse cursor is not over it.
Here is the corrected version.

.carousel-control-prev,
.carousel-control-next {
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 52%;
    width: 25px;
    height: 25px;
    margin-top: -20px;
    font-size: 35px;
    font-weight: 100;
    line-height: 18px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.5);
    border: 2px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
}

.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

#solidres .carousel:hover > .carousel-control-prev,
#solidres .carousel:hover > .carousel-control-next {
    opacity: 1 !important;
}

.carousel-control-prev:focus,
.carousel-control-next:focus,
.carousel-control-prev:active,
.carousel-control-next:active {
    opacity: 0 !important;
}

#solidres .carousel:not(:hover) .carousel-control-prev,
#solidres .carousel:not(:hover) .carousel-control-next {
    opacity: 0 !important;
}

saguaros

iorbita JA Resort is built with T4 framework which initially utilizes Bootstrap 4, but it does support Bootstrap 5 at this moment.

The issue is when JA Resort template was first released, the style for Solidres is based on Bootstrap 4 and when they move to BS 5, there maybe conflict.

Is that working fine now? Just let me know if you need any further assistance on this.