slick carousel jump to a slide on element hover

jumps to a specific slider on hover over on an element

this is working now, here is the example, mouse over the buttons to see the slide change.

trying to add this:

Javascript

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);

and this

Javascript

$('.your-element').slick('slickGoTo',3);

On testing i think the slides must be 0,1,2 which makes some sense...?

Further Reading: 

  1. https://api.jquery.com/hover/ 
  2. https://kenwheeler.github.io/slick/ 

 

HTML

<h2>Auto Slick Carousel</h2>
<p>Here we add some auto scrolling to the slider rather than it waiting for use input.</p>
<div class='slider-two'>
<div class='slide slide-1'>some stuff</div>
<div class='slide slide-2'>some stuff</div>
<div class='slide slide-3'>some stuff</div>
</div>

<p>so rather than clicking these elements i just want to change the slides when they are hovered over</p>
<div class='hover-elements'>
  <div class='btn btn-primary' id='btn1'>hover over 1 (second slide)</div>
  <div class='btn btn-primary' id='btn2'>hover over 2 (third slide)</div>
  <div class='btn btn-primary' id='btn3'>hover over 3 (1st slide)</div>
</div>

CSS

.slide {
width:100%;
height:300px;
background:#CCC;
color:#FFF;
text-align:center;
font-size:34px;
font-weight:bold;
padding-top:100px;
}
.slider-one,.slider-two,.slider-three {
margin-bottom:30px;
}
.slide-2 {
background:#EEE;
}
.slide-1 {
background:url(https://kruxor.com/images/pexels-photo-4389409.jpeg) center no-repeat;
background-size:cover;
}
.slide-2 {
background:url(https://kruxor.com/images/server-rack.jpg) center no-repeat;
background-size:cover;
}
.slide-3 {
background:url(https://kruxor.com/images/pexels-photo-709552.jpg) center no-repeat;
background-size:cover;
}

.slick-dots li.slick-active button:before, .slick-dots li button:before {
    color: #FFF;
    opacity: 1;
    font-size: 16px;
}
.slick-dots li.slick-active button {
    border: 5px solid #00AC9F;
    border-radius: 100%;
}
.slick-dots li button {
  border: 5px solid #FFF;
}
.slick-dots li.slick-active button:before {
    color: transparent;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>

Javascript

$(document).ready(function(){
// slider two
$('.slider-two').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  dots: true,
  arrows:true
});
  
$( "#btn1" ).hover(
  function() {
    $('.slider-two').slick('slickGoTo',1);
  }, function() {
  }
);

 $( "#btn2" ).hover(
  function() {
    $('.slider-two').slick('slickGoTo',"2");
  }, function() {
  }
);

   $( "#btn3" ).hover(
  function() {
    $('.slider-two').slick('slickGoTo',"0");
  }, function() {
  }
);

  
  
});

function jump_slide(num) {
	
}

Auto Slick Carousel

Here we add some auto scrolling to the slider rather than it waiting for use input.

some stuff
some stuff
some stuff

so rather than clicking these elements i just want to change the slides when they are hovered over

hover over 1 (second slide)
hover over 2 (third slide)
hover over 3 (1st slide)

Other Items in javascript

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 227 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
You drown not by falling in the river, but by staying submerged.
Unknown