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:
- Media field - an image and alt text [1]
- A line of text [2]
- A second line of text [3]
- A URL, either as an internal link, e.g. "/another-blog/link-to-article" or "https://external-link.com" [4]
- 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.
$introcount = count($this->intro_items); $counter = 0;
andif (!empty($this->intro_items))
,$key
andendif;
can be completely removed from your code -- they aren't doing anything.=>
after$key
as well.