slick carousel jump to a slide on element hover
<p>jumps to a specific slider on hover over on an element</p>
<p>this is working now, here is the example, mouse over the buttons to see the slide change.</p>
<p><img src="https://i.imgur.com/DOdLOop.gif" alt="" /></p>
<p>trying to add this:</p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );<br /></code></pre>
<pre><code class="javascript hljs">$( "li" ).hover(<br /> function() {<br /> $( this ).append( $( "<span> *</span>" ) );<br /> }, function() {<br /> $( this ).find( "span" ).last().remove();<br /> }<br />);</code></pre>
<p>and this</p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">$('.your-element').slick('slickGoTo',3);</code></pre>
<p>On testing i think the slides must be 0,1,2 which makes some sense...?</p>
<p>Further Reading: </p>
<ol>
<li><a href="https://api.jquery.com/hover/">https://api.jquery.com/hover/</a> </li>
<li><a href="https://kenwheeler.github.io/slick/">https://kenwheeler.github.io/slick/</a> </li>
</ol>
<h4> </h4>
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.
so rather than clicking these elements i just want to change the slides when they are hovered over