We Keep Coding

When moving to another page and coming back to the page where slick carousel is present, slick carousel is not working

_high.html.erb:
<div class="col-xl-12">
<div class="default-slick-carousel freelancers-container freelancers-grid-layout">
<%= render partial: '/pages/top_trainers' %>
</div>
</div>
##To reinitialize the carousel when coming back to the carousel page, I have added this:
<script type="text/javascript">
$(document).ready(function(){
$('.default-slick-carousel').not('.slick-initialized').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1292,
settings: {
dots: true,
arrows: false
}
},
{
breakpoint: 993,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
})
</script>
So, when I am on this page, carousel is working fine.But when i am moving to some other page and coming back to the carousel page, carousel sliding is not working

Slick JS vertical with two elements in same line

I've a problem with Slick. I need to display two elements in a same line with a vertically animation. It's working fine with the horizontally display.
$(".slide").slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
pauseOnHover: true,
autoplay: false,
dots: false,
arrows: false,
vertical: true
});
My complete code : https://jsfiddle.net/pzvov8og/
Do you have any idea ?
Thank you !

you have to write: slidesToScroll: 2, because you want display two elements
$(".slide").slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
pauseOnHover: true,
autoplay: false,
dots: false,
arrows: false,
vertical: true
});

set infinite: false, you set slides to show: 2 , and its trying to show 4 slide for infinite scroll

Grab and Swipe Cards

I'm creating animated cards with Slick, a JS Carrousel plugin.
I'm wondering if it's possible to add a grab and swipe interaction, as well as a pause on hover function, like the one shown here https://www.hioscar.com/individuals/network/ny
Here's what I've got so far: http://jsfiddle.net/gavinfriel/kbsemva0/1/
<section class="slider">
<!--staff-card : The first card repeats unexpectedly-->
<div class="staff-card">1</div>
<!-- /staff-card -->
<!--staff-card-->
<div class="staff-card">2</div>
<!-- /staff-card -->
<!--staff-card-->
<div class="staff-card">3</div>
<!-- /staff-card -->
</section>
JS
$(function() {
$('.slider').slick({
speed: 07000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true
});
});
If there's a better plugin to use for this other than Slick I'm all ears.

Ok, I'm not sure if this satisfies you, if not, then sorry :) Still I was trying to help ;) Well that's the best I could do :)
$(function() {
$('.slider').slick({
speed: 1000,
autoplay: true,
autoplaySpeed: 0,
pauseOnHover: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
draggable: true,
swipeToSlide: true,
});
});
Possible solution
Regards, KJ

Slick.js : Scroll through carousel items without selecting slides

I am using slick carousel in one of my projects & have added the configuration to display the next and prev button.
I am trying to tweak the default behavior of the next and prev button in such a way that clicking them just scrolls from left to right but the currently selected slide will remain the same. I am not able to tweak this default behavior and clicking the next and prev button is changing the selected slide as well. Has anyone tried the same?
$('.product-slider').slick({
dots: true,
infinite: false,
speed: 700,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
dots: true
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: false,
dots: true
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
dots: true
}
}
]
});

Detecting screen size with jQuery and change property

I am using a Slick slider/carousal and displaying six items currently. Now what I want to do is I want the script to detect if the browser has been resized or viewed from a smaller screen (say below 768px) then the number of items displayed should change to 3. This is a perfect replica of the media query function in CSS which detects the screen size for making the website responsive. Just the same thing I want to be performed in my jQuery function but I have never done so. Here is my script:
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).on('ready', function() {
jQuery(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 6,
slidesToScroll: 6
});
});
</script>

The plugin has already way to update the options on different view ports. Please have a look at this. Hope this will help you.
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});