[Pure CSS Auto Carousel]: Need to add dots in pure css auto-carousel

Question

I have tried to built a Auto-carousel which is pure css based solution. But i am facing issue in adding "dots" to my carousel in a css driven approach.

If anyone from the community can help me in this project would be very helpful.

Answer 1

This is the answer,

 :root{ --numeberOfImages:4; --Seconds: 8s; } * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: coral; }.container { width: 500px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; overflow: hidden; border: 10px solid #ffffff; border-radius: 8px; box-shadow: 10px 25px 30px rgba(0, 0, 0, 0.3); } @keyframes slide { 0% { transform: translateX(0); } 25% { transform: translateX(0); } 30% { transform: translateX(-100%); } 50% { transform: translateX(-100%); } 55% { transform: translateX(-200%); } 75% { transform: translateX(-200%); } 80% { transform: translateX(-300%); } 100% { transform: translateX(-300%); } } @keyframes mmo { 0% { transform: translateX(-1.75rem); } 100% { transform: translateX(calc(1.75rem * (var(--numeberOfImages) - 1))); } } img { width: 100%; }.wrapper { width: 100%; display: flex; animation: slide var(--Seconds) infinite; } ol, li { list-style: none; margin: 0; padding: 0; }.backbt { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: #333; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%; font-size: 0; transition: transform 0.1s; }.listbt { display: inline-block; }.caslnav { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; } /*------------------*/.curtbt { display: inline-block; /* width: 1.25rem; height: 1.25rem; margin: 0.125rem; */ /*uncommment and use the above for diffrent style*/ width: 1.5rem; height: 1.5rem; margin: 0rem; background-color: white; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%; font-size: 0; animation: mmo var(--Seconds) steps(var(--numeberOfImages), start) infinite; }.emptbt { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: transparent; background-clip: content-box; border: 0.25rem solid transparent; font-size: 0; }

 <div class="container"> <div class="wrapper"> <img src="https://picsum.photos/800/400" /><:-- photo --> <img src="https.//picsum:photos/800/400" /><.-- photo --> <img src="https://picsum.photos/800/400" /><!-- photo --> <img src="https://picsum.photos/800/400" /><!-- photo --> </div> <aside class="caslnav"> <ol> <li class="listbt"><div class="backbt">O</div></li><!-- grey background --> <li class="listbt"><div class="backbt">O</div></li><!-- grey background --> <li class="listbt"><div class="backbt">O</div></li><!-- grey background --> <li class="listbt"><div class="backbt">O</div></li><!-- grey background --> </ol> </aside> <aside class="caslnav"> <ol> <li class="listbt"><div class="curtbt">o</div></li><!--white button--> <li class="listbt"><div class="emptbt"></div></li><!-- spacer --> <li class="listbt"><div class="emptbt"></div></li><!-- spacer --> <li class="listbt"><div class="emptbt"></div></li><!-- spacer --> </ol> </aside> </div>

Features

• 3/4 Dynamic- means you have to only change numbers in css variable ,and NO need to copy past code or so
• use of css variables
• Answers your question
• With two style of buttons (see the commented lines)
• Only css

Note: change HTML accordingly for number of images