An automatic slideshow with personalized navigation markers

   <body>
<div id="slide">
      <div class="slideshow-container">
        <div class="mySlides fade"> <img src="images/Image01.png"> </div>
        <div class="mySlides fade"> <img src="images/Image02.png"> </div>
        <div class="mySlides fade"> <img src="images/Image03.png"> </div>
        <div class="mySlides fade"> <img src="images/Image04.png"> </div>
        <div class="mySlides fade"> <img src="images/Image05.png"> </div>
        <div class="mySlides fade"> <img src="images/Image06.png"> </div>
      </div>
     </div>
    <div class="dots"> 
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
          <span class="dot" onclick="currentSlide(5)"></span>
          <span class="dot" onclick="currentSlide(6)"></span>
   </div
</body>

i am attempting to change the bullets on my slider to match the design shown in this image. Can anyone offer assistance with this customization?

https://i.sstatic.net/iB3bB.png

javascriptjqueryhtmlcss

Answer №1

If you want to add a CSS pseudo-element like :before or :after to your element with the class .dot, there are various techniques available.

This is just one method to achieve it:

.dot {
  display: inline-block;
  border: 1px solid brown;
  border-radius: 50%;
}
.dot:before {
  content: '';
  display: block;
  background: brown;
  width:10px;
  height: 10px;
  border-radius: 50%;
  margin: 1px;
}

.dot.active:before {
  background: red;
}
<div class="dots"> 
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot active" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
          <span class="dot" onclick="currentSlide(5)"></span>
          <span class="dot" onclick="currentSlide(6)"></span>
   </div>

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

Secure API Calls with Prismic while Keeping Access Tokens Hidden

As I delve into the world of building a Vue.js web app, I find myself faced with the challenge of making calls to my Prismic repository without exposing my access token. The Rest API approach outlined here seems promising, but I'm at a loss on how to ...

javascriptnode.jsvue.jsoauthprismic.io

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

When utilizing Twitter Bootstrap, the validation classes like has-error or has-warning must be added to the wrapping form-group element to style both the input and its label. However, Knockout-Validation directly adds the class to the input element itself. ...

javascriptcsstwitter-bootstrapknockout.js

Unable to load the requested resource: net::ERR_FAILED

I am facing an issue while trying to write React code. When using Chrome, I encountered the following warning: Access to XMLHttpRequest at 'file:///D:/programe/code/Vscode/ReactDemo/HelloWorld/test.js' from origin 'null' has been block ...

javascripthtmlreactjsgoogle-chromedebugging

Placing a three-dimensional object in the corners of the canvas using three.js

I'm trying to position a 3D object in either corner of my canvas automatically, regardless of its size. https://i.sstatic.net/IWgr1.png After finding a solution on stackoverflow: I implemented the following code for my object: mesh.position.set(-( ...

javascriptcanvasthree.js

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

AngularJS checkbox feature to tally the number of items that are currently selected or unselected

How can I use angularjs to count the number of selected and unselected checkbox items? My HTML <label class="col-xs-5 pull-left" style="font-weight: bold; margin-left: 4px; margin-top: -17px;" >You have selected <font size="3" color="green" ...

javascriptangularjscheckbox

The json_decode function in PHP unexpectedly returns null when provided with valid JSON input

I am attempting to send a JSON object using AJAX post in JavaScript as shown below: $.ajax({ type: 'POST', url: 'testPost.php', data: {json: cond}, dataTyp ...

javascriptphpajaxjsonpost

Expanding the last row to ensure its proper width with flex-grow

I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...

htmlcssresponsive-designflexboxflex-grow

By pressing enter, Combobox autocomplete feature automatically selects the first item in the suggestion list

I have successfully implemented a jQuery combobox autocomplete feature, similar to the one on the demo below. jQuery combobox autocomplete Is there a way to configure the jQuery combobox autocomplete to automatically select the top suggestion when the ...

javascriptjqueryjquery-ui

Using jQuery to create a dynamically moving div that forms an endless wall

In order to create a continuous wall that pulls text from a database and displays it, I've developed the following code: $(function() { var x = 0; var y = 100.0; var z=0; setInterval(function() { x -= 0.1; y -= 0.1; ...

javascriptjqueryhtmlcss

Stop the user from entering anything other than numbers

I am working on a directive to only allow users to input numbers. Check out my implementation below. Snippet from my directive template: <input type="text" maxlength="5" ng-keypress="allowNumbers($event)"> Function in my directive: $scope.allowNu ...

javascriptangularjs

What happens when the user closes a notification in GetUIkIt 3?

Is there a way to detect when a UIKit notification has been closed? The UIkit notification plugin () mentions that it has a close event. Can this be utilized for notifications triggered programmatically as shown below? e.g. UIkit.notification({ mess ...

javascriptgetuikit

I am perplexed by the CSS property `height: auto;` which seems to be making the element taller than necessary. How exactly is

Currently, I am dealing with some HTML/CSS aspects of an already established WordPress website. It appears that there might be an issue related to the theme's CSS causing this problem, although it is not immediately apparent. Specifically, there is s ...

htmlcss

Step-by-step guide on crafting a harmonious row of a label and a responsive button group

One of my projects involves a form that contains a list of elements. I want this form to be responsive and suitable for all screen sizes. When I initially run the project on a larger screen, everything looks good. However, when I resize the screen to a sma ...

htmlangulartypescript

Using both Ajax and a standard submit can be applied to a single form in jQuery

I need to implement a confirm step on one of my pages. Here's what I want to achieve: When the user clicks 'submit', an AJAX request is triggered, which performs the necessary action and then displays a confirmation dialog If the user ...

javascriptjqueryajaxformsjquery-forms-plugin

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

htmlcss

Sending a multi-dimensional array to the server using PHP via POST

Similar Question: multi-dimensional array post from form I am looking to transfer data from the client to the PHP server using jQuery's $.post() method. Once the data reaches the server, I want the $_POST['myList'] variable to be in one ...

phpjavascriptjqueryajaxpost

What is the best way to limit a form to only allow 2 checkbox selections?

Seeking advice on implementing a form for a website giveaway featuring 3 prizes. Each participant should only be able to select 2 items from the list. I've already created a JavaScript-based form, but I'm concerned about its reliability since it ...

phpjavascript

Waiting for Promise Js to be fulfilled

I've been exploring the use of Bluebird for handling promises in Node.Js. I have encountered a situation where I need a function to return only when a promise is fulfilled. The desired behavior can be illustrated by the following code snippet: functi ...

javascriptnode.jspromisebluebird

Unable to display animation without first launching it on Rive web

I attempted to incorporate a Rive animation into my Angular web application <canvas riv="checkmark_icon" width="500" height="500"> <riv-animation name="idle" [play]="animate" (load)=&qu ...

htmlangulartypescriptrive