slick carousel jump to a slide on element hover [ javascript ]

20

4:00 am, February 15, 2021

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...?

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

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)

Posted in javascript

20

4:00 am, February 15, 2021

View Statistics

This Week

216

This Month

963

This Year

0

Add Comment