Is it possible to incorporate dots into a CSS-only slider design?

Is it possible to incorporate dots into my pure CSS slider? As a novice in CSS, I'm struggling to figure out how to do this. My attempts so far have resulted in the dot not aligning correctly with my images. I am exclusively using CSS for my slider. Can anyone provide guidance on how to add dots to my script?

.banner {
width: 100%;
position: relative;
z-index:0;
height:120px !important;
background: no-repeat center center scroll
}
@keyframes slider {
    0%  { left: 0; }
    30% { left: 0; }
    40% { left: -100%;}
    70% { left: -100%;}
    80% { left: -200%;}
    95% { left: -200%;}
}
#slider {
overflow: hidden;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite; 
}
 <div class="banner-container revolution">
     <div class="banner" id="slider">
         <figure>
             <ul>
                 <li> <img src="slide1.png" alt="" /> </li>
                 <li> <img src="slide2.png" alt="" /> </li>
                 <li> <img src="slide3.png" alt="" /> </li>
             </ul>
         </figure>
     </div>
 </div>

htmlcssslider

Answer №1

Explore this unique slider design without relying on javascript or jquery libraries. It's a sleek and efficient way to showcase images.

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 80px;
    height: 100%;
    display: none;
    position: absolute;
  opacity: 0;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Open Sans", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}

.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(0, 0, 0, 0.8);
}
<ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
<div class="nav">
<label for="img-6" class="prev">&#x2039;</label>
<label for="img-2" class="next">&#x203a;</label>
</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
<div class="nav">
<label for="img-1" class="prev">&#x2039;</label>
<label for="img-3" class="next">&#x203a;</label>
</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
<div class="nav">
<label for="img-2" class="prev">&#x2039;</label>
<label for="img-4" class="next">&#x203a;</label>
</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
<div class="nav">
<label for="img-3" class="prev">&#x2039;</label>
<label for="img-5" class="next">&#x203a;</label>
</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
<div class="nav">
<label for="img-4" class="prev">&#x2039;</label>
<label for="img-6" class="next">&#x203a;</label>
</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
<div class="nav">
<label for="img-5" class="prev">&#x2039;</label>
<label for="img-1" class="next">&#x203a;</label>
</div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>

Answer №2

    $('ol li').on('click', function(){
        
        var index = $(this).index() + 1;
        
        $(".active").fadeOut(300);
        
        $("#slide_" + index).fadeIn(300);        
        $(".slide").removeClass("active");
        $("#slide_" + index).addClass("active");
    });
<div class="banner-container revolution">
                <div class="banner" id="slider">
                <figure>
                    <ul >
                        <li> <img id="slide_1" src="slide1.png" alt="" />
                        </li>
                        <li> <img id="slide_2" src="slide2.png" alt="" />
                        </li>
                        <li> <img id="slide_3" src="slide3.png" alt="" />
                        </li>
                    </ul>
                  </figure>
                </div>
            </div>
             <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

    $('ol li').on('click', function(){
        
        var index = $(this).index() + 1;
        
        $(".active").fadeOut(300);
        
        $("#slide_" + index).fadeIn(300);        
        $(".slide").removeClass("active");
        $("#slide_" + index).addClass("active");
    });
 <div class="banner-container revolution">
                <div class="banner" id="slider">
                <figure>
                    <ul >
                        <li> <img id="slide_1" src="slide1.png" alt="" />
                        </li>
                        <li> <img id="slide_2" src="slide2.png" alt="" />
                        </li>
                        <li> <img id="slide_3" src="slide3.png" alt="" />
                        </li>
                    </ul>
                  </figure>
                </div>
            </div>
             <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CDN secured with SSL for Skype

Back in the day, I would check if a logged-in user could access the Skype CDN to decide whether or not to display certain UI elements: https://cdn.dev.skype.com/uri/skype-uri.js However, out of the blue, their CDN switched (causing my code to break) to ...

javascriptjqueryhtmlskype

Customize Your Chrome Experience: Inject an Element to Open a Hidden HTML Page within the Extension

I am currently working on a Chrome extension and I would like to add a link tag into an object, which will then direct the user to an about page stored within the extension itself. Is there a way to achieve this? Below is the code from my content.js file: ...

javascripthtmlgoogle-chrome

What is the correct way to retrieve the content from a textarea?

Currently, I am developing a browser extension that converts text to binary. Below is the structure of my form: <textarea id="in"></textarea> <textarea id="out" readonly></textarea> <div id="buttons"> <button id="convert ...

javascripthtmlfirefoxfirefox-addontextarea

Issue with updating Angular list reference when deleting an item

My current task involves implementing a feature that displays selected items from a hierarchical structure on the right side. slice.component.ts : import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core&a ...

javascripthtmlangularlisttypescript

Implementing CSS to Style Images in JavaFX FXML

After creating the FXML structure below, I attempted to define a border in CSS for the Image by using code in the customerform.css file: <VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.exampl ...

javacssjavafxfxml

Tips for changing the anchor tag color without the cursor hovering over it

Hello, I am learning CSS and I've been practicing some coding. #IconHover:hover { background-color: #F18B13; color: #fff; height: 50px; width: 180px; } a:hover { color: #fff; text-decoration: none; } <table id="IconHo ...

css

Why can't the file upload button locate its CSS styles?

Check out this jFiddle demonstrating the issue. Some of the Angular code may appear broken in the example, but that's just due to it being pasted into jFiddle; it's not an actual problem I'm facing. The CSS styles aren't working on the ...

cssangularjs

Is there a way to extract content from an HTML <span id> using Python, Selenium, and BeautifulSoup?

I've been working on a project to create a web scraping tool using Python, Selenium, beautifulSoup, and pandas to generate a .csv report. Unfortunately, I'm facing an issue with extracting the "data-date" text from the HTML snippet below. Specif ...

pythonhtmlpandasseleniumbeautifulsoup

Is it necessary to scroll when all elements on the page are in absolute position?

I have all elements positioned absolutely on my page. Some are at the top and some are at the bottom. However, when I add an additional element to display news text in the center of the page, it gets hidden under the element aligned at the bottom. When I s ...

htmlcss

Conceal the div element if the value exceeds 0

I'm looking for a way to display a div when the number of remaining days is less than 0. I got it working on jsfiddle, but for some reason, it doesn't work anywhere else. if ($('.daysrem&a ...

javascriptjqueryhtml

Tips for enhancing this CSS design to resemble a table

I am a beginner in working with CSS layouts for websites and I have implemented the following code that serves my purpose. Although it is currently functional, its functionality does not necessarily mean that it is well-written. Could someone review this ...

css

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

javascriptcssangulartypescriptdrop-down-menu

Set the cursor in the textbox automatically when the page first loads

Is there a way to set focus on a text box when a page loads? I've attempted using the autofocus attribute but it hasn't worked for me. You can view my form here: http://pastebin.com/xMJfQkcs ...

javascripthtml

Swap out video files using jQuery

I have a basic video player setup <video id="video" src="http://xyx.com/zzz.m3u8" controls="controls" width="480" height="280"></video> I would like the ability to switch between different video streams by clicking on a link, for example &l ...

jqueryhtmlvideohyperlinkstream

What is the process of dynamically altering the content inside a td element?

Is there a way to dynamically change the content of a td based on the state of a checkbox? If the checkbox is unchecked, the td should remain plain, but if checked, I want the text to have a specific style: b style="font-family:Tahoma;font-size:8pt;color: ...

c#asp.nethtml

What is the best way to create a dynamic page hero image that animates upon page loading?

My website has a banner image that loads using the following code: @keyframes animatedBanner { from { background-position-y: bottom; } to { background-position-y: top; } } .page-hero { background-image: url(https://via.placeholder. ...

csscss-animationsbackground-image

Expanding a UL element to be wider than its containing parent LI

I am facing an issue with my nav bar's dropdown menus. I want the dropdown menus to stretch to accommodate the content inside them, but currently they are limited by their parent element's width. After researching the problem, I've come acr ...

htmlcsshtml-lists

Leveraging a combination of directives alongside a primary directive

Our application currently utilizes angular-redactor.js from https://github.com/TylerGarlick/angular-redactor. The objective is to develop a new angular directive capable of accommodating any text editor, not limited to redactor. Is there a method to call ...

javascripthtmlangularjsangularjs-directive

What is the best way to arrange text inputs in alignment?

I encountered an issue while creating a form that includes fields for username, password, and email. The alignment of the email input box seems to be off when compared to the username and password input boxes. Is there a method to ensure that all the input ...

htmlcss

What are the steps required to play a YouTube video using Selenium WebDriver?

In my Python script, I am trying to play/pause a YouTube video using driver.find_element_by_name("body").send_keys('keys.SPACE'), but it doesn't seem to work. Is there any alternative method I can use? Since the Selenium method is ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver