JA Purity IV - JACM Hero Style 1 - Slideshow

m4ciekk

Good afternoon guys,

How can I change the height of the images in the slideshow? JoomlArt Advanced Custom Page Module - Hero - Styles 1. The same slideshow is in the Logistics layout. As background images, I have linked images with a resolution of 1920x1280x. I would like to keep the same 3:2 aspect ratio whether I view the site on a phone, tablet, or FHD, UHD, 4K monitor.

Cheers,
Maciek

cssyeah

Hi @m4ciekk,
I can't add custom style to your website when login with jasupport account. So you can add following CSS to your custome.css file to increase the height of the slideshow to a 3:2 ratio.

.acm-hero.style-1 .owl-carousel .owl-stage-outer {
  width: 100%;
  height: 0;
  padding-top: calc(2/3*100%);
}

.acm-hero.style-1 .owl-carousel .owl-stage-outer .owl-stage {
  position: absolute;
  top: 0;
  bottom: 0;
}

.acm-hero.style-1 .owl-carousel.owl-drag .owl-item {
  height: 100%
}

.acm-hero.style-1 .acm-hero-item {
  background-size: cover;
  display: flex;
  align-items: center;
  height: 100%;
}

Kind regards,

m4ciekk

cssyeah
Thank you so much for quick response and solution. I finally change aspect ratio for 1:2 but left 2:3 only for mobile.

Could you tell me one more thing?

Is there a way to loop a slideshow? I have already 7 different images in slideshow and set up an autoplay. When it comes to the last one it stops. I wish it could play over and over again.1->7 then again 1->7, etc.

PS. I could add code do custom.css using jasupport account. Site Template Style > one of the ja_purity_iv style > Tools > Edit Custom CSS

cssyeah

Hi @m4ciekk,
Can you assign jasupport account to Supper Admin? I need permission to edit custom.css file and custom code for slideshow. More importantly, I need to test before I notify you of completion.

m4ciekk

cssyeah
There is not such as option as Support Admin. support is an Administrator account with all his privileges. The higher one is only Super User.

cssyeah

Hi @m4ciekk,

Update CSS rules to change slideshow image ratio:

.acm-hero.style-1 .owl-carousel .owl-stage-outer {
  width: 100%;
  height: 0;
  padding-top: calc(2/3*100%);
}

@media (min-width: 768px) {
  .acm-hero.style-1 .owl-carousel .owl-stage-outer {
    padding-top: calc(1/2*100%);
  }
}

.acm-hero.style-1 .owl-carousel .owl-stage-outer .owl-stage {
  position: absolute;
  top: 0;
  bottom: 0;
}

.acm-hero.style-1 .owl-carousel.owl-drag .owl-item {
  height: 100%
}

.acm-hero.style-1 .acm-hero-item {
  background-size: cover;
  display: flex;
  align-items: center;
  height: 100%;
}

Slideshow loop.
Step 1: Open the style-1.php file in the "[root]/templates/ja_purity_iv/acm/hero/tmpl/" folder.
Step 2: Go to about line 68 and change the value of the loop property from false to true.
```
    loop: true,
```
Step 3: Reload your website to view the changes.

m4ciekk

cssyeah
Thank You so much. It helped.

I have few other issues but I'll try to figure out it by self first before I create a new topic.

Thanks once again.
Cheers,
Maciek