Detecting screen size with jQuery and change property - javascript

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
]
});

Related

Slick Slider - Multiple Sliders with variations in Slider Length

Hello my dear community,
I'm working on a site with multiple sliders on one site. I use slick.js
Problem ist that the slidesToShow is depending on the number of slider items.
Maximum slidesToShow should be 6
if the number of slides is smaller then 6:
-> slidesToShow should be the number of slider items
I tried this:
$('.carousel').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: $(this).querySelectorAll( '.item:not(.slick-cloned)' ).length > 4 ? 6 : 2,
slidesToScroll: 1,
});
Got console error that querySelectorAll is not a function. Also $(this) is the document not the slider in that context.
Also I tried to iterate through the sliders and tried to initializing them one by one but it also does not work
var imgcarousels = document.getElementsByClassName('vaunet-carousel ');
Array.prototype.forEach.call(imgcarousels, function(carousel, index) {
console.log(carousel);
carousel.slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 991,
settings: {
dots: true,
arrows: false,
slidesToShow: 1
}
}
]
});
});
Error: carousel.slick is not a function
Any Idea how to make the slidesToShow depending on the slides?
Thanks a ton <3
Regards
Timo

How can I apply a JS library starting to a specific viewport without changing the DOM before?

<script>
if($(window).width()<=768){
$('#wm_carrousel--inner').slick({
dots: true,
infinite: true,
speed: 300,
arrows:false,
slidesToShow: 3,
slidesToScroll: 1,
edgeFriction:2,
swipe:false,
swipeToSlide:false,
touchMove:true,
})
}
</script>
I'm trying to run this script just in mobile, but it changes the DOM on desktop and messes up my styles.

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

How to make horizontal timeline slider right oriented

In horizontal timeline slider jquery, I want that by default it is right oriented. Like in picture now 2015 prices is on right. I want that most right which is 2017 prices is selected by default and user can scroll to left
My code
$('.timeLine-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
});
Use the initialSlide option.
$(document).ready(function() {
$('.timeLine-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 4
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<div class="timeLine-slider">
<div>2010</div>
<div>2011</div>
<div>2012</div>
<div>2013</div>
<div>2014</div>
<div>2015</div>
<div>2016</div>
<div>2017</div>
</div>

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
}
}
]
});

Categories