What is the process for adding personalized arrows to a slick slider that switches images when hovered over?

I'm currently utilizing the slick slider from . My goal is to have my custom arrows change appearance when hovered over.

Below you will find the JavaScript code I've implemented to customize the left and right arrows within the slider. However, I am trying to replace the prevArrow image with a different image upon hovering over it. Likewise, I want the nextArrow image to be swapped with another one when hovering over the right arrow.

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow:"<img class='a-left control-c prev slick-prev' src='https://www.pikpng.com/pngl/m/449-4492390_arrow-to-the-left-png-icon-free-arrow.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='https://toppng.com/uploads/preview/free-right-arrow-symbol-png-vector-arrow-right-vector-115632158025eetnpo2gn.png'>"
    });
});

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2457484d474f094745564b5157414864150a1c0a15">[email protected]</a>/slick/slick.min.js"></script>

I attempted to achieve this in CSS (see below), but encountered some issues. It seems like the new image is appearing behind the original one...? Is there a way to make the new image take the place of the old arrow image?

  .slick-prev:hover {
     background: url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat !important;
    }

Update following feedback from @Manjuboyz: here is an example demonstrating the working code

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow:"<img class='a-left control-c prev slick-prev' src='https://images.pexels.com/photos/584799/pexels-photo-584799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'>",
nextArrow:"<img class='a-right control-c next slick-next' src='https://images.pexels.com/photos/536/road-street-sign-way.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'>"
    });
});
.slick-prev:hover {
background: url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat !important;
  }
  
.slick-next:hover {
background: url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat !important;
  }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384b54515b53155b594a574d4b5d54780916001609">[email protected]</a>/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16657a7f757d3b757764796365737a5627382e3827">[email protected]</a>/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0839c99939bdd9391829f8583959cb0c1dec8dec1">[email protected]</a>/slick/slick.min.js"></script>
<div class="slider" data-slick='{"arrows": true'}>
  <img src="https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/462331/pexels-photo-462331.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/162031/dubai-tower-arab-khalifa-162031.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/290595/pexels-photo-290595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1823739/pexels-photo-1823739.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1769371/pexels-photo-1769371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>

javascriptcssslick.js

Answer №1

Attempting to modify the src value in an img tag using CSS hover effects is not effective. Instead, I have successfully resolved this issue by incorporating JQuery functions.

<div style="margin:25px;">

<div class="slider" data-slick='{"arrows": true'}>
        <img src="https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/462331/pexels-photo-462331.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/162031/dubai-tower-arab-khalifa-162031.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/290595/pexels-photo-290595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1823739/pexels-photo-1823739.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1769371/pexels-photo-1769371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    </div>

</div>

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow:"<img class='a-left control-c prev slick-prev' src='https://images.pexels.com/photos/584799/pexels-photo-584799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' id='prv'>",
nextArrow:"<img class='a-right control-c next slick-next' src='https://images.pexels.com/photos/536/road-street-sign-way.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' id='nxt'>"
    });
}); 


$(document).ready(function(){
  $("#prv").hover(function(){
    $("#prv").attr("src", "https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }, function(){
    $("#prv").attr("src", "https://images.pexels.com/photos/584799/pexels-photo-584799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  });
  $("#nxt").hover(function(){
    $("#nxt").attr("src", "https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }, function(){
    $("#nxt").attr("src", "https://images.pexels.com/photos/536/road-street-sign-way.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  });
});

The use of CSS for Hover Effects is unnecessary in this context.

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

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

htmlcss

What are the distinctions between manually and programmatically changing URLs in Angular 6?

My query pertains to differentiating navigation methods, specifically between clicking a button with [routerLink] and manually entering a URL in the browser's search bar. Update: I have a fixed menu on a certain page that appears as follows: <ul& ...

javascriptangular

Issue with JQuery mobile: dynamically inserted popup fails to appear

Can you help me troubleshoot an issue with my function? It's supposed to take a text string and output the text surrounded by '¬¬¬' in a button with a pop-up menu attached. The button looks fine, but when clicked, the popup ul list doesn& ...

javascriptjqueryhtmljquery-mobile

Filtering nested object properties by value using Java Script

I am seeking assistance in filtering nested Objects by property values, with a specific requirement involving values stored in an array. Despite previous similar inquiries, I have yet to find a solution tailored to cases like mine. In reviewing the code s ...

javascriptarraysfilternested-object

CSS text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...

jquerycssfade

Is Angular considered bad practice due to its reliance on singletons, despite its widespread use and popularity?

Angular relies on singletons for all its services, however using singletons is often frowned upon in the development community. Despite this controversy, I personally find Angular to be a valuable and effective tool. What am I overlooking? ...

javascriptangularjsdesign-patternssingleton

How can I retrieve the HEX code of a color from an image when hovering or clicking?

Is there a way to retrieve the hexadecimal code of a pixel within an image displayed on a webpage using jQuery, without relying on the canvas element? I am specifically interested in obtaining the actual color code of the image itself, not the background c ...

javascriptjqueryhtmlcsshover

Transferring information from one page to the next

How can I efficiently transfer a large amount of user-filled data, including images, between pages in Next.js? I've searched through the Next.js documentation, but haven't found a solution yet. ...

javascriptreactjsnext.js

Making an "associated" route the active route within Aurelia

In my Aurelia application, I have implemented two routes: a list route called Work and a detail route called WorkDetail. Currently, only the list route is visible in the navigation menu: Home | *Work* | Contact | . . . When users navigate to the W ...

javascriptaurelia

What is the method for deactivating a form input field in Angular Formly?

Is there a specific way to disable a form input field using Angular Formly? I have tried searching online and cannot find a clear answer. Even after checking Formly's 'field configuration docs', I only found one mention of the word 'dis ...

javascriptangularjsangular-formly

Nav bar taking up full width of page, centered to the right with content area

I am facing an issue with aligning my full-width navbar with my fixed content area. The ul keeps changing based on the browser or resolution. Check out this fiddle for reference: http://jsfiddle.net/fwyNy/ subject site CSS Code: #topribbon{ width: 10 ...

htmlcssnavmenubarnavbar

Refreshing web pages using AJAX

I currently have an application that includes a search feature where users can look up items in the database. The search functionality is working well with AJAX, but I'm now looking to incorporate this AJAX functionality into my pagination system. Spe ...

javascriptruby-on-railsajaxpaginationkaminari

Ways to prevent a <a href> element with a class linked to javascript from behaving like a block element

I am currently facing an issue with formatting an inline navigation. The last link, which is associated with a JavaScript class, is causing the entire link to become a block element instead of aligning inline with the rest of the links in the navigation. ...

javascripthtmlcss

Setting MenuItem to the correct width in asp.net simplified

I have a 1000px wide container, within it there is a menu control with 5 items (links). Each item has a width of 200px in the CSS file to make use of the entire length of the line. .level1 { border-width: 0px; margin: 0px; padding: 0px; background ...

c#asp.netcss

Exploring the power of AngularJS and Jasmine: testing multiple instances of a service in action

Currently, I am immersing myself in the book "Mastering Web Application Development with AngularJS" and came across an example test named 'Aggregating callbacks.' The specific example causing me troubles involves the Person object: var Person = ...

javascriptangularjstddjasminejasmine-node

utilizing jquery for dynamic color changes

Check out the code snippet below, which involves the bootstrap accordion and showcases certain elements within the title section. <dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Manage</span>& ...

jquerycsscolorsaccordion

Using NodeJS with Jade to handle a dynamic number of blocks

As I dive into NodeJS development, a challenge has presented itself... In my project, there is a main template called layout.jade that sets up the top navigation bar using Bootstrap on every page. This specific application focuses on music, where each art ...

javascriptnode.jstwitter-bootstrapexpresspug

Is it possible to filter two arrays simultaneously?

I am dealing with two arrays: const array1 = [{ "id": "4521", "name": "Tiruchirapalli", "stateId": "101" }, { "id": "1850", ...

javascriptarraysreactjsfilter

How can I make this NextJS component show its width as soon as the page loads?

When I try to run this code to retrieve the browser's screen width, I encounter the following error: ReferenceError: window is not defined The commented-out code works fine with a default value of 0 and updates correctly when the browser width chan ...

javascriptreactjsnext.js

Enable seamless SCSS inclusion in Vue components through automatic importing

My goal is to import a variables.scss file globally in my Vue project. I have set up my vue.config.js file as follows: module.exports = { css: { loaderOptions: { scss: { additionalData: `@import "@/st ...

javascriptvue.jsvue-cli