Different ways to customize carousel indicators

How can I customize my carousel dots to look like this?

This is my current setup.

Here is the CSS code for styling it:

.slick-dots {
  position: absolute;
  bottom: -45px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 5px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

HTML

<div class="row slick">
    // a series of images
</div>
cssreactjstwitter-bootstrapcarouselreact-slick

Answer №1

Here is the solution for you. :)

nav.carousel:hover {
  cursor: default;
}

/* Styling to hide the radio button */
nav.carousel input[type=radio] {
  display: none;
}

/* Label styling */
nav.carousel label {
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  box-shadow: inset 0 1px 1px 0 #999;
}
nav.carousel label:hover {
  background: #bbb;
  cursor: pointer;
  box-shadow: inset 0 1px 1px 0 #777;
}
nav.carousel input:checked + label {
  background: linear-gradient(#00CFFF, #1584bc);
  box-shadow: inset 0 0 1px 1px #087DC0;
}
<nav class="carousel">
  <input id="carousel-item-1" type="radio" name="carousel-dots">
  <label for="carousel-item-1">Go to item 1</label>

  <input id="carousel-item-2" type="radio" name="carousel-dots" checked>
  <label for="carousel-item-2">Go to item 2</label>

  <input id="carousel-item-3" type="radio" name="carousel-dots"> 
  <label for="carousel-item-3">Go to item 3</label>

  <input id="carousel-item-4" type="radio" name="carousel-dots">
  <label for="carousel-item-4">Go to item 4</label>

  <input id="carousel-item-5" type="radio" name="carousel-dots">
  <label for="carousel-item-5">Go to item 5</label>

  <input id="carousel-item-6" type="radio" name="carousel-dots"> 
  <label for="carousel-item-6">Go to item 6</label>
</nav>

Answer №2

here is an illustration

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

.cool-dots {
  bottom: 60px;
  li button:before,
  li.cool-active button:before {
    color: transparent;
    opacity: 1;
  }
  li button:before{
    background-color: transparent;
    border: 6px solid #fff;
    border-radius: 50%;
    display: inline-block;
    height: 25px;
    width: 25px;

  }
  li.cool-active button:before {
    background-color: #fff;
  }
}

Answer №3

Check out this quick HTML and CSS solution I put together: http://jsfiddle.net/kajrttgv/2

<div class="container">
    <span class="dot"></span>
    <span class="dot active"></span>
    <span class="dot"></span>
</div>

.dot {
    background-color: #eee;
    border: 1px solid #666;
    border-radius: 5px;
    box-shadow: inset 1px 1px 1px #888;
    display: inline-block;
    height: 10px;
    width: 10px;
}
.dot.active {
    background-color: #41ABE5;
    box-shadow: inset 2px 0px 2px -2px #333;
}

Answer №4

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

Implementing square custom dots in a React slick carousel.

.slick-dots li {
    margin: 0;
}

.slick-dots {
    margin-top: 50px;
}

.slick-dots li button:before, .slick-dots li.slick-active button:before {
    color: transparent;
    opacity: 1;
}

.slick-dots li button:before {
    margin-top: 5px;
    background-color: transparent;
    border: 1px solid rgb(90, 90, 90);
    border-radius: 20%;
    display: inline-block;
    height: 5px;
    width: 10px;
}
.slick-dots li.slick-active button:before {
    background-color: rgb(26, 24, 24);
}

Answer №5

I've recently experimented with creating some small dots using CSS and HTML. Check out the result on JSFiddle: http://jsfiddle.net/InnovativeCoder/d3j42n7s/

<div class="dot-container">
    <span class="custom-dot"></span>
    <span class="custom-dot active"></span>
    <span class="custom-dot"></span>
</div>

.dot-container {
    padding: 20px;
}

.custom-dot {
    height: 15px;
    width: 15px;
    background: lightgray;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px gray inset;
}

.custom-dot.active {
    background-color: #41ABE5;
    box-shadow: inset 0 0 4px #888888;
}

Answer №6

My approach to this task would be as follows:

To ensure accurate results, I will meticulously craft each element using the tools available in Photoshop. This will allow me to replicate your vision precisely.

I will start by creating two small circles, each measuring 20 pixels by 20 pixels.

  • The first circle will feature a gradient of light blue and dark blue hues.
  • The second circle will have a gradient transitioning from black to gray shades.

After saving these designs as .PNG files, I will import them into the .CSS file. The blue circle will be assigned the rule 

background-image: url("blue_dot.png");
, while the black circle will receive 
background-image: url("black_dot.png");
.

If necessary, adjustments can be made to the width and height properties to suit specific requirements.

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

Error Encountered in React Starter Kit

Recently, I set up a new React TypeScript application using the starter kit available at https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter Upon following the provided instructions, I encountered an error while attempting to ru ...

reactjsnpm

Stop modal content from automatically opening

Is there a way to prevent the content inside from opening before it is clicked? Every time I try to create a modal or dropdown list menu, the content always opens automatically before being clicked. Why does this happen? var modal = document.getElemen ...

javascripthtmlcssdrop-down-menumodal-dialog

Creating stylish pricing cards with Bootstrap

I am struggling to create 3 pricing cards in a row with equal width and height, along with positioning the sign-up button at the bottom of each card regardless of the amount of text. I have attempted various methods but have not been successful. Can som ...

htmlcssbootstrap-4bootstrap-cards

Implementing a provider in NextJS for a select few pages

Can I add a provider specifically for certain routes in my Next.js app, instead of applying it to the entire application? Check out my "pages" folder Here's my context file [server.jsx] import { createContext, useState } from 'react'; con ...

reactjsnext.jsreact-context

Issue with jQuery scrolling functionality

Can someone explain why the site is loading in this specific part of the page? My guess is that it has something to do with jQuery. You can view the live website here: Instead of loading in the home section, the site is loading in the portfolio section. I ...

jqueryhtmlcss

The importance of timing in @keyframes animations

I was experimenting with a fun project that involved creating a timer using just HTML and CSS. But I'm curious, why do I need to add a delay to my 100s animation in order to synchronize it properly with the 10s animation? .second::before { anima ...

cssanimationcss-animations

When the Escape key is pressed on the modal, it activates the escape event on the parent component

Welcome to the main page. "use client"; import React, { useEffect, useState } from "react"; import TestModal from "./TestModal"; const App = () => { const [isOpen, setIsOpen] = useState(false); const [isDiscardModalOp ...

javascriptreactjseventsmodal-dialogkeyboard-events

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

Unable to send State from parent Component to Child (state counter for pomodoro clock)

Hi everyone, I am relatively new to React and currently working on building a Pomodoro Clock. However, I have hit a roadblock while trying to get the buttons + and - to update the numbers set in my State. Here is what I have in my Main App Component: clas ...

javascriptreactjs

Retrieve information from a JSON file, then display it in a specialized JSX component by utilizing the .map() function - specifically in Next

Recently I've been delving into NextJs, attempting to fetch objects from a JSON file and display them within a customized component that's created within a function as a React component. Here's where things get tricky - even though the JSON ...

reactjsjsonnext.js

Preventing state changes from affecting the rendering of a Material-UI table in a ReactJS application

Inside my app.js, the following code snippet defines a state: const [open,setOpen] = useState(false) This state is used to control whether a material-ui Alert should be displayed on screen for 3 seconds using this code: useEffect(()=>{ setTimeout( ...

javascriptreactjsmaterial-ui

Guide to transforming an array into JSON format and displaying the JSON data in a table within a React JS environment

I have an array that contains some data, I want to convert this array into JSON format, so I can display the data in a Bootstrap table. Here's an example of how it could be done: import "bootstrap/dist/css/bootstrap.min.css"; import Table f ...

reactjs

How can I align icons to the right and display text below each one?

I need to display icons with their names below them in a row from left to right, with proper spacing. Each icon should have its name displayed underneath it, for example "Icon1" under icon1 and so on. The tierGo element does not contain any CSS styles. ...

htmlcsslisttwitter-bootstrapmargin

Adjusting the display property using the CSS plus symbol operator

I am currently in the process of designing a dropdown menu using CSS. The focus is on utilizing the following code snippet: #submenu_div { display: none; } #li_id:hover + #submenu_div { display: block; } UPDATE: Here is the corrected HTML structure ...

htmlcss

React Native Child Component State Update Issue

In my code, there is a Child component that triggers a function in the Parent component. However, when the function is triggered, an error related to the setState method is thrown. Issue with Promise Rejection (id: 0): The '_this12.setState' i ...

javascriptfacebookreactjsreact-native

The problem I'm facing with the space-between property in my flexbox list

I am working with a list ol that contains items styled as shown below: ol { display: flex; flex-flow: row wrap; justify-content: space-between; width: 400px; } li { width: 120px; height: 120px; } DEMO Currently, I have 3 it ...

htmlcssflexbox

Is there a way to adjust the contents of an iframe to match the dimensions of the iframe itself?

I am trying to adjust the width of an iframe to 60%, regardless of its height. Is there a way to "zoom in" on the contents of the iframe to fit the width, so that I can then set the height based on this zoom level? I haven't been able to find any solu ...

javascripthtmlcssiframe

Laravel causing grid issues in Bootstrap 4

After upgrading from bootstrap 3 to 4, I have encountered some issues with the grid display in Laravel 5.4 using npm and gulp. Even though the CSS and JS are included correctly as removing the link causes JS errors or style changes, I am facing problems wi ...

twitter-bootstraplaravelgridbootstrap-4

What steps can I take to enable React dev tools on my local machine?

Is there a way to make React developer tools function properly while I am working on the front-end of my project on my local machine? When I say front end, I mean that I am loading an index.html file without running a server, with the intention of later d ...

javascriptreactjsgoogle-chrome

What is the best way to create a regular expression that allows only numeric values in an antd input

I need to restrict my antd Input field to accept only numbers, not alphabets. The current logic is working fine for my requirements, except for alphabets. How can I write a regex to accept only numbers? import React from 'react' import * as AntD ...

regexreactjsantd