Since it seems that you want to avoid using any JavaScript, it looks like the most sensible route would be to add CSS for those “dots” divs that just matches up with the timing of your slider animations. For example:
@-webkit-keyframes highlight-dot {
0% {
background-color: black;
}
/* Increasing/decreasing this percent can help you get interesting fade effects. */
10% {
background-color: white;
}
100% {
background-color: white; /* Return to default */
}
}
div.dots div {
background-color: white;
-webkit-animation: highlight-dot 40s infinite;
}
/* Now set the animation delays to match your slider links */
div.dots div:nth-of-type(4) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-ms-animation-delay: 30s;
-o-animation-delay: 30s;
animation-delay: 30s;
}
/* ... etc. */
You can also consider setting 0% to the default (say, white) and a low number like 5% to the “active” color (say, black) for a starting fade animation.
One last note: you have some browser prefixes, but for more cross-platform functionality you will need to add more in (for instance you have @-webkit-keyframes to support older Chrome versions, but no default @keyframes for modern browsers).
How can I fill in the “dots” in my slideshow?
My slideshow consists of 4 elements, clicking on an element redirects to another page (google as an example).
To make it work I found this solution: animate a slideshow of links. Each link has text and image. (it works)
But the slideshow is automatic and I would like every time an element is displayed (when the link with the image and text appears) the corresponding dot is filled in black.
I tried to do it differently, but I had a lot of problems with the links.
I don’t know if I explained myself well, but I attached the code, the CSS animation and the styles of the “dots”.
PD. Name my slideshow slider.
div.dots {
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: end;
}
div.dots div {
width: 10px;
height: 10px;
border: 1px solid black;
border-radius: 50%;
}
div.dots div:hover {
background-color: black;
}
a.slide {
position: absolute;
-webkit-animation: round 40s infinite;
opacity: 0;
}
@-webkit-keyframes round {
25% {
opacity: 1;
z-index: 990;
}
40% {
opacity: 0;
z-index: 1;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-ms-animation-delay: 30s;
-o-animation-delay: 30s;
animation-delay: 30s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-ms-animation-delay: 20s;
-o-animation-delay: 20s;
animation-delay: 20s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<a class="slide" href="https://google.com.mx" target="_blank">
<div class="text">
<p>Some text 1</p>
</div>
<img src="<?=base_url()?>assets/img/2.jpg">
</a>
<a class="slide" href="https://google.com.mx" target="_blank">
<div class="text">
<p>Some text 2</p>
</div>
<img src="<?=base_url()?>assets/img/3.jpg">
</a>
<a class="slide" href="https://google.com.mx" target="_blank">
<div class="text">
<p>Some text 3</p>
</div>
<img src="<?=base_url()?>assets/img/2.jpg">
</a>
<a class="slide" href="https://google.com.mx" target="_blank">
<div class="text">
<p>Some text 4</p>
</div>
<img src="<?=base_url()?>assets/img/1.jpg">
</a>
</div>
<div class="dots">
<div focus=""></div>
<div></div>
<div></div>
<div></div>
</div>
