CODEWITHSUNDEEP
javascriptcssslick.js
olly
olly

Reputation: 333

How do I create custom arrows in slick slider that change image on hover?

I'm using slick slider https://kenwheeler.github.io/slick/. I want my custom arrows to change when i hover over them.

Below is the javascript i've used to customise the left and right arrows in the slider. But i want the prevArrow image to be replaced with another image when i hover over the prevArrow. And similarly the nextArrow image to be replaced with a another image when the right arrow is hovered.

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/[email protected]/slick/slick.min.js"></script>

I tried something like this in CSS (see below), but it's not working. Maybe because the new image is appearing behind the previous image...? How could i make a new image appear in 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;
    }

Edit after comment from @Manjuboyz: below is a working example of my 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/[email protected]/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Upvotes: 1

Views: 5110

Answers (1)

ArnabXD
ArnabXD

Reputation: 519

The problem here is : you are trying to change src value in img tag using css hover effects . I think i solved the matter by adding few 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");
  });
});

Your CSS For Hover Effects is not Required

Upvotes: 1

Related Questions