Is there a way to customize the appearance of the current slide in slick.js with jQuery?

I am looking to customize the appearance of the currently active slide by giving it an orange border.

Keep in mind that the class for the active slide is : slick-active and the structure is as follows : 

<div class='slick-slide slick-active' ...>

My approach so far is:

jQuery

$('div').find('.slick-active').css('border', 'orange 3px solid');

Unfortunately, I have not been able to successfully apply this styling. Any assistance would be greatly appreciated.

Update:

After correcting my jQuery syntax error, I was able to get the border to show up, but it's not the effect I was going for originally.

Current result :

Check out my JSFiddle

jquerycssslick.js

Answer №1

I encountered the same issue but luckily stumbled upon a solution here: . Martin provided a helpful response which involves adding a bit of css to the .slick-center class. Make sure to insert your orange border below the initial code block for it to take effect!

.center .slick-center h3 {
    -moz-transform:scale(1.08);
    -ms-transform:scale(1.08);
    -o-transform:scale(1.08);
    -webkit-transform:scale(1.08);
    color:#e67e22;
    opacity:1;
    transform:scale(1.08);
 }
.center h3 {
    opacity:0.8;
    transition:all 300ms ease;
}

Answer №2

Dealing with a similar issue myself, I found a solution for future reference:

To accomplish this, I utilized the class .slick-current

I wrapped it in a div so that I could use the selector #divID .slick-current {}

For instance:

#sliderPreviewBox .slick-current  {
padding-bottom: 5px;
border-bottom: 2px solid #006ab2;
color: blue; 
}

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

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...

csssymfonycss-spritesassetic

Using jQuery to send an image to web service

I'm currently working on a project for a Blackberry OS 5 + application and I have a requirement to send data along with an image. For the development of this application, I am utilizing HTML5, jQuery, and Webworks SDK. The form structure looks like ...

jqueryhtmlblackberry-webworksmultipartform-data

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

androidcssangularnativescript

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

htmlcssbootstrap-4

Apply the CSS style specifically to the initial row in the table

Is there a way to target the first row of a table with a different tr class using CSS? <div id="right"> <table> <tbody> <tr class="head"> <td >Date</td><td>Info</td><td>More</td> </tr> ...

htmlcss

div maintain aspect ratio while scaling

My current layout is structured like this: HTML <div id="container"> <div id="zoomBox"> <div class="box"></div> <div class="box"></div> <div class= ...

javascriptjqueryhtmlcssinternet-explorer

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js

Troubles with displaying table content in Internet Explorer 9 due to .innerHTML limitations

Here we go again, encountering yet another issue with using the .innerHTML property in tables on IE (version 9, to be precise). Despite searching extensively here and on Google, I have not been able to find a solution. While many others have faced similar ...

jqueryinternet-explorerhtml-tablerowinnerhtml

When the size is reduced, the content spills out of the div

I made a div container and added some callouts inside it. You can find my code uploaded here https://codepen.io/muhammad-usman-the-animator/pen/mKgoNj .name { color: black; font-weight: bold; margin-left: 20px; font-size: 20px; } .det ...

htmlcssbootstrap-4

Adjust webpage display with JavaScript

Utilizing the mobile-first approach of Zurb Foundation, I successfully created a responsive design. However, my client now requires a direct link labeled "View desktop version" in the footer for when the website is accessed on mobile devices or tablets. T ...

javascriptcssmedia-querieszurb-foundation

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Currently, I am trying to implement a tooltip above my progress bar. However, the small tooltip that I have is not functioning correctly... This is how it currently appears: https://i.sstatic.net/ZJUyT.png I need the tooltip to display above the white d ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

The functionality of removing a class on the body element is ineffective when using pagepiling.js

After creating a website using pagepiling.js, I implemented a script that adds the 'active' class to the section currently in view. My goal was to add a specific class to the body when my section1 is considered active. Here's the initial app ...

javascriptjquerypagepiling.js

The content within a select tag is experiencing vertical misalignment

The select tag on my page is behaving oddly - when there is a value in it, it is aligned to the bottom vertically. Upon inspecting the CSS, I noticed that the only styles applied are font size and type. Strangely, removing the doctype from the page resol ...

htmlcsshtml-select

Interactive web page with dynamic JQuery functionality and navigable page links

I am working on the project/index.html page <html> <head> <title>Index</title> <scripts...> </head> <body> Hello <div id="content"></div> <button id="page1" value="page1"/> <but ...

javascriptphpjquerydynamicindexing

Utilizing JQuery to select only the initial set of descendant elements

After developing a custom JQuery plugin for a CMS page, I encountered an issue when the client unintentionally disrupted its functionality. The problem arose when they inserted a <div> element within the editable area that was designated for their us ...

jqueryjquery-selectors

Struggling to get JQuery timing events to function properly?

Encountering timing issues with the events in my self-made simon memory game. Experimented with setTimeout but struggling to figure out which events to time and the appropriate duration for them to be distinguishable. $('#play').click(function( ...

javascriptjquerytiming

The jquery autocomplete feature is failing to display search results

I have a text input with autocomplete functionality using JavaScript: JavaScript code: $("#descSearchBox").keyup(function(e) { $(".ui-autocomplete").removeClass("ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all") .ad ...

javascriptphpjqueryautocomplete

Sketch a line extending from one element to the next

Is there a way to create a styled line that starts from the center of one <td> element and ends at the center of another? I attempted to use the jQuery Connections plugin but it only connects the edges of the elements, not their centers. The plugin ...

javascriptjqueryhtmldomshapes

The bootstrap navigation bar appears in a vertical orientation rather than the expected horizontal

My page is displaying the navbar vertically instead of horizontally. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to ...

htmlcssbootstrap-4twitter-bootstrap-4