Display stylish Instagram-like dots in the slick slider

Currently, I am utilizing the slick slider to display numerous slider items. Additionally, I want to include dots to indicate the position of the items. However, there are too many dots visible at once, and I wish to display them similarly to how Instagram does.

Here is a reference of my desired display:

https://i.sstatic.net/jqTUg.jpg

I would like only a maximum of 6 dots to be visible at any given time, starting with the first dot on the left side.

Is there a method to target the 4 dots in the middle? Currently, I am only able to target the active dot using its class slick-active. However, I require the dots before and after the active one.

Below is the code for my current slider setup: https://codepen.io/cray_code/pen/ZrKpWY

jquerycsstwitter-bootstrapbootstrap-4slick.js

Answer №2

To access the previous and next elements, you can utilize jquery's prev and next functions.

I have made some modifications to your codepen example here: link

$('li.slick-active').prev().css('background-color', 'red');
$('li.slick-active').next().css('background-color', 'orange');

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

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

cssnode.jsexpress

iOS Safari browser does not support changing the caret color in textarea

Seeking a solution to hide the text cursor (caret) from a textarea on iOS browsers like Safari and Chrome. Despite trying the caret-color property, it does not seem to work. Are there any alternative methods to achieve this? One approach I attempted is b ...

javascripthtmlcssiossafari

Styling drop caps using CSS on Wordpress posts

I've successfully implemented a customized dropcap for my Wordpress blog posts using CSS. Is there a way to limit this effect to just the first paragraph, leaving subsequent paragraphs unaffected? Any guidance on achieving this would be highly apprec ...

htmlcss

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

When creating a table within the div section of the code, I am incorporating text using the DRAG and DROP feature with appropriate styling. The table adjusts in size when I resize my window, indicating that it is functioning correctly. However, as the num ...

javascripthtmlcss

Suggestions for activating a particular accordion divider?

I've come across a seemingly simple question that has been causing me some trouble. I am attempting to expand, open, or collapse a specific accordion panel, but have not been able to find an answer so far. Let's say I have three panels identified ...

javascriptjqueryhtmlaccordion

When the user clicks on the element, it triggers a function that

    Recently, I implemented a select menu that triggers a post function via ajax when a user selects an option. This function generates table rows using PHP and returns the HTML code for them. Within these generated rows, there is an Add button.   My ...

phpjqueryajaxbutton

JavaScript button click changes the selected row's color in a DataTable

I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked. Here is the HTML code snippet for the rows: <tr role="row" class="odd"></tr> <tr role="row" class="even selected"></tr> & ...

javascripthtmlcssdatatable

Display all months vertically with Bootstrap-Year-Calendar instead of horizontally

I recently integrated the Bootstrap-Year-Calendar plug-in into my project, but it seems to be displaying vertically. I'm not sure if this issue is related to my scripts or links. I attempted to change the versions of both jQuery and Bootstrap, but the ...

javascripthtmlbootstrap-4

Utilizing settings.url to distinguish between different ajax requests

As I work to distinguish between various AJAX requests, I'm grappling with this code snippet: $(document).ajaxSend(function(event, request, settings) { $('#user-content .modal-body').addClass('hide'); $('#user-c ...

javascriptjqueryajax

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

I am trying to implement a nested menu using a JSON object in Angular 4. Below is the code I have written. <div id="panel-group"> <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index"> <div class ...

htmlangularbootstrap-4angular5angular2-routing

the ajax post method

I recently wrote some code that involves two files (index.html and jeu.php). In the index.html file, when I submit a form, I am supposed to be redirected to the other page (jeu.php). However, the issue seems to be with the click event. <html> <he ...

phpjavascriptjquery

Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...

javascripthtmlcsssvgtext-decorations

Utilizing Bootstrap to position a navigation bar next to a floated element causes surrounding content to be pushed

I am facing an issue with my 2 column layout where the content in the right column is being pushed down to clear the left column, resulting in a lot of vertical white space between the navigation and the content. Below is the code snippet: <head> ...

csstwitter-bootstrap

Changing textarea html content to an iframe in real time with the use of jQuery

Is it possible to use jQuery to transfer HTML content entered into a textarea to an iframe in real time, without refreshing the page? I have searched for a solution but have not found a clear direction. Any code snippet and explanation would be greatly ap ...

jqueryhtml

Establishing a Goal in Google Analytics using JavaScript

My approach to recording Goals in Google Analytic tool via JS involves adding code directly to the page: <meta name="description" content="iReserve"> <link rel="shortcut icon" href="/ico/favicon.ico" /> & ...

javascriptjquerygoogle-analytics-apigoogle-tag-managergoal-tracking

Is the image loading promptly? Do we need to adjust the resolution?

Is there a way to decrease the loading time of images? For instance, if I have 20 identical images on my homepage (each sized at 1920x1080) This is the image: I want to crop the image to a fixed size. Here's the CSS code I am using: .startpage_im ...

htmlcss

Having trouble accessing the value of a node in JavaScript, as it keeps returning as "null"

Experimenting with converting HTML elements into lists. The objective is to generate a list of all values in a table upon clicking the "page next" buttons on it. Afterward, an alert should display the value of the first item in the list, which corresponds ...

javascriptjqueryhtmllistnodes

I am facing an issue where both curl and file_get_contents are not functioning properly after

When attempting to access a user's city information using coordinates, I have encountered an issue with the response not being displayed in my console. The process involves a javascript function that takes latitude and longitude data, sends it to a PH ...

javascriptphpjqueryajaxcurl

Several target elements on a single page

I am currently facing a problem with maintaining the active state of one anchor tag's target while clicking another button within the main identifier. Upon clicking the INTEL button, its opacity changes from 0 to 1. However, upon clicking Data Histor ...

htmlcss

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

htmlcsstwitter-bootstrap