0

I have created a rotating carousel using a Joomla 4 blog alternative menu item. The blog shows the three latest articles as 'intro items' on a rotation of 24 seconds in total, i.e. 8 seconds each. The first item has position: relative; and the following two are position: absolute; so that they sit one of top of each other. There are no leading items. No 'content' is displayed and each article consists of just five custom fields:

  1. Media field - an image and alt text [1]
  2. A line of text [2]
  3. A second line of text [3]
  4. A URL, either as an internal link, e.g. "/another-blog/link-to-article" or "https://external-link.com" [4]
  5. The URL's title text [5]

For some reason, although the images and text rotate as expected, and the URL displayed in the code on the front end also displays correctly in the source code, if you hover over it or click it, it only shows/goes to "/why-join-us/reason-three". The code on the front-end view in 'view source' looks like this:

<div id="newCarousel">
    <div class="carousel-article">
        <div class="carousel-link"><a href="/why-join-us/reason-one" title="Reason one"><img src="/images/home-carousel/image-one.jpg" alt="Long description"></a>
        </div>
        <div class="textCopy1"><a href="/why-join-us/reason-one" title="Reason one">Text 1 for image 1</a>
        </div>
        <div class="textCopy2"><a href="/why-join-us/reason-one" title="Reason one">Text 2 for image 1</a>
        </div>
    </div>
    <div class="carousel-article">
        <div class="carousel-link"><a href="/why-join-us/reason-two" title="Reason one"><img src="/images/home-carousel/image-two.jpg" alt="Long description"></a>
        </div>
        <div class="textCopy1"><a href="/why-join-us/reason-two" title="Reason two">Text 1 for image 2</a>
        </div>
        <div class="textCopy2"><a href="/why-join-us/reason-two" title="Reason two">Text 2 for image 2</a>
        </div>
    </div>
    <div class="carousel-article">
        <div class="carousel-link"><a href="/why-join-us/reason-one" title="Reason one"><img src="/images/home-carousel/image-three.jpg" alt="Long description"></a>
        </div>
        <div class="textCopy1"><a href="/why-join-us/reason-three" title="Reason three">Text 1 for image 3</a>
        </div>
        <div class="textCopy2"><a href="/why-join-us/reason-three" title="Reason three">Text 2 for image 3</a>
        </div>
    </div>
</div>

But the only active link is "/why-join-us/reason-three"

In carousel.php I have this code, having stripped out most of the rest:

    <div id="newCarousel">
        <?php
        $introcount = count($this->intro_items);
        $counter = 0;
        ?>
        <?php if (!empty($this->intro_items)) : ?>
            <?php foreach ($this->intro_items as $key => &$item) : ?>
                <?php
                $this->item = & $item;
                echo $this->loadTemplate('item');
                ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

This is the render part of the carousel_item.php. All other code has been removed as I don't have lead items, links, pagination, etc:

<div class="carousel-article">
    <div class="carousel-link"><a href="<?php echo $this->item->jcfields[4]->value; ?>" title="<?php echo $this->item->jcfields[10]->value; ?>"><?php echo $this->item->jcfields[1]->value; ?></a>
    </div>
    <div class="textCopy1"><a href="<?php echo $this->item->jcfields[4]->value; ?>" title="<?php echo $this->item->jcfields[5]->value; ?>"><?php echo $this->item->jcfields[2]->value; ?></a>
    </div>
    <div class="textCopy2"><a href="<?php echo $this->item->jcfields[4]->value; ?>" title="<?php echo $this->item->jcfields[5]->value; ?>"><span><?php echo $this->item->jcfields[3]->value; ?></span></a>
    </div>
</div>

And this is the CSS:

#newCarousel {
  height: auto;
  max-width: 1040px;
  position: relative;
  margin: 0 auto;
}
#newCarousel > * {
  animation: 24s autoplay6 infinite linear;
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0.0;
}
@keyframes autoplay6 {
  0% {opacity: 0.0}
  4% {opacity: 1.0}
  33.33% {opacity: 1.0}
  37.33% {opacity: 0.0}
  100% {opacity: 0.0}
}
#newCarousel > *:nth-child(1) {
  animation-delay: 0s;
}
#newCarousel > *:nth-child(2) {
  animation-delay: 8s;
}
#newCarousel > *:nth-child(3) {
  animation-delay: 16s;
}
#newCarousel .carousel-article {
  position: absolute;
  height: auto;
  width: 100%;
}
#newCarousel .carousel-article:first-child {
  position: relative;
}
#newCarousel .textCopy1 {
  animation: 8s tC1 infinite linear;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
  font-size: 1.5rem;
  line-height: 1.25rem;
  color: #fff;  
  opacity: 0;
  text-shadow: 0.12em 0.12em 0.12em rgba(0,0,0,0.9);
}
#newCarousel .textCopy1 a {
  color: #fff;
}
#newCarousel .textCopy2 {
  animation: 8s tC2 infinite linear;
  position: absolute;
  bottom: -2rem;
  font-size: 1.15rem;
  left: unset;
  right: 2rem;
  opacity: 0;
  text-align: right;
}
#newCarousel .textCopy2 a {
  color: var(--theme-darkest);
}
#newCarousel .textCopy2 span {
  background: rgba(255,255,255, 0.85);
  padding: 0.25rem 0.75rem;
}
@keyframes tC1 {
  0% {bottom: 0; opacity: 0.0}
  5% {bottom: 0; opacity: 0.0;}  
  20% {bottom: 60%; opacity: 1.0;}
  90% {bottom: 60%; opacity: 1.0;}  
  95% {bottom: 60%; opacity: 0.0;}
  100% {bottom: 0; opacity: 0;};
}
@keyframes tC2 {
  0% {bottom: -2rem; opacity: 0.0}
  20% {bottom: -2rem; opacity: 0.0}
  35% {bottom: 35%; right: 2rem; opacity: 1.0;}
  90% {bottom: 35%; right: 2rem; opacity: 1.0;}  
  95% {bottom: 35%; right: 2rem; opacity: 0.0;}   
  100% {bottom: -2rem; left: 2rem; opacity: 0.0;};
}
@media only screen and (min-width: 768px){
  @keyframes tC1 {
    0% {bottom: 0; opacity: 0.0}
    5% {bottom: 0; opacity: 0.0;}
    20% {bottom: 60%; opacity: 1.0;}
    90% {bottom: 60%; opacity: 1.0;}  
    95% {bottom: 60%; opacity: 0.0;}
    100% {bottom: 0; opacity: 0;};
  }
  @keyframes tC2 {
    0% {bottom: -2rem; opacity: 0.0}
    20% {bottom: -2rem; opacity: 0.0}
    35% {bottom: 45%; left: 4rem; opacity: 1.0;}
    90% {bottom: 45%; left: 4rem; opacity: 1.0;}  
    95% {bottom: 45%; left: 4rem; opacity: 0.0;}   
    100% {bottom: -2rem; left: 4rem; opacity: 0.0;};
  }
  #newCarousel .textCopy1 {
    font-size: 2.5rem;
  }
  #newCarousel .textCopy2 {
    font-size: 1.75rem;
  }
}

When viewed in Firefox inspector, the correct URLs are in the right place, but only the third URL shows up as an active link when the images or text are hovered over.

I do have a surrounding div that wraps the whole lot and contains a pause/play button triggered by custom JS but removing that makes no difference.

Any ideas what am I missing or doing wrong? I'm stumped. TIA.

Improve this question
3
  • After several hours' fiddling, I believe I have answered my own question and will post the revised CSS.
    – Gillian
    Apr 5, 2022 at 17:36
  • It looks like $introcount = count($this->intro_items); $counter = 0; and if (!empty($this->intro_items)), $key and endif; can be completely removed from your code -- they aren't doing anything.
    – mickmackusa
    Apr 5, 2022 at 20:40
  • Thank you - the cleaner the code the better. I had to remove the => after $key as well.
    – Gillian
    Apr 6, 2022 at 9:52

1 Answer 1

Reset to default
0

Here is my revised CSS. Basically I solved it by moving the images way off the canvas until required. It also passes Accessibility tests.

#newCarousel {
  position: relative;
  margin: 0 auto;
  height: auto;
  max-width: 1040px;
}
#newCarousel > * {
  animation: 24s autoplay6 infinite linear;
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0.0;
  background-color: #000;
}
@keyframes autoplay6 {
  0% {opacity: 0.0; left:0; top:0;}
  4% {opacity: 1.0; left: 0; top:0;}
  33.33% {opacity: 1.0; left: 0; top:0;}
  37.32% {left: 0; opacity: 0.0;}
  37.33% {left: -3000px; opacity: 0.0;}
  100% {opacity: 0.0}
}
#newCarousel > *:nth-child(1) {
  animation-delay: 0s;
}
#newCarousel > *:nth-child(2) {
  animation-delay: 8s;
}
#newCarousel > *:nth-child(3) {
  animation-delay: 16s;
}
#newCarousel > * a {
  color: #fff;
  text-decoration: none;
}
#newCarousel > .carousel-article {
  position: absolute;
  left: -3000px;
}
#newCarousel > .carousel-article:first-child {
  position: relative;
  left: -3000px;
}
#newCarousel .textCopy1 {
  animation: 8s tC1 infinite linear;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
  font-size: 1.5rem;
  line-height: 1.25rem;
  color: #fff;
  opacity: 0;
  text-shadow: 0.12em 0.12em 0.12em rgba(0,0,0,0.9);
}
#newCarousel .textCopy2 {
  animation: 8s tC2 infinite linear;
  position: absolute;
  bottom: -2rem;
  font-size: 1.15rem;
  left: unset;
  right: 2rem;
  opacity: 0;
  text-align: right;
}
#newCarousel .textCopy2 a {
  color: #999999;
}
#newCarousel .textCopy2 span {
  background: rgba(255,255,255, 0.95);
  padding: 0.25rem 0.75rem;
}
@keyframes tC1 {
  0% {bottom: 0; opacity: 0.0}
  5% {bottom: 0; opacity: 0.0;}  
  20% {bottom: 65%; opacity: 1.0;}
  90% {bottom: 65%; opacity: 1.0;}  
  95% {bottom: 65%; opacity: 0.0;}
  100% {bottom: 0; opacity: 0;};
}
@keyframes tC2 {
  0% {bottom: -2rem; opacity: 0.0}
  20% {bottom: -2rem; opacity: 0.0}
  35% {bottom: 35%; right: 2rem; opacity: 1.0;}
  90% {bottom: 35%; right: 2rem; opacity: 1.0;}  
  95% {bottom: 35%; right: 2rem; opacity: 0.0;}   
  100% {bottom: -2rem; left: 2rem; opacity: 0.0;};
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.