I have accordion combination: tabs is slider (I use slick carousel with set break point). It work fine, until I resize window over break point, it not until working.
This is my site:
http://geeman-2.myshopify.com/
(New arrivals section)
And this my code:
$(document).ready(function(){
$('.sub-slider').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6,
responsive: [
{
breakpoint: 1208,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var panelHandle;
$('.btn-on').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
panelHandle = handle;
$('#' + handle).slideDown('slow');
$('.triangle-' + handle).slideDown('slow');
$('.' + handle).slick({
dots: false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
$('.btn-close').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
$('#' + handle).slideUp(1000);
$('.triangle-' + handle).slideUp(1000);
});
});
I hope everyone help me solve it!
Thanks!
Did you try the $('.slick-carousel-responsive').resize(); trick found here? https://github.com/jellekralt/Responsive-Tabs/issues/52 - adding it to my resize event fixed a similar issue for me!
Related
_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 can I call this function again once a user resizes their browser?
<script type="text/javascript">
var x = window.matchMedia("(min-width: 1150px)")
if (x.matches) {
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000
});
});
} else {
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000,
centerMode: true
});
});
}
</script>
You can try put your script into a function, and call that function when window.onresize happens.
window.onresize = doStuffYouWant;
function doStuffYouWant() {
// put your code inside here.
}
You should rewrite your code like the following:
var slickSlider = function() {
var x = window.matchMedia("(min-width: 1150px)");
if (x.matches) {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000
});
} else {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000,
centerMode: true
});
}
};
$(function() {
slickSlider();
});
$(window).resize(slickSlider);
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
}
}
]
});
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
]
});
I want to hide a directive at the beginning, when it is still creating. In this directive I'm integrating a jquery carousel.
This is the directive:
return {
restrict: 'E',
replace: true,
scope: true,
templateUrl: 'slick.html',
link: function(scope: any, element: any, attrs: any) {
scope.slickReady = false;
var slickEl = element.querySelector('.slick');
if(slickEl){
slickEl.on('init', function(){
scope.slickReady = true;
});
slickEl.slick({
arrows: true,
autoplay: false,
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
}
}
]
})
}
}
}
This is the main html:
<slick></slick>
This is the slick.html:
<div ng-switch on="slickReady">
<div class="slick" ng-switch-when="true"></div>
<div class="spinner" ng-switch-when="false">
<div ng-repeat="item in todos">
<img ng-src="{{item.face}}" class="md-avatar img-center">
<p class="truncate">{{item.who}}</p>
</div>
</div>
</div>
The problem is that I have this error in console:
TypeError: element.querySelector is not a function
at Object.link (http://localhost/js/directives/slick.js:9:35)
EDIT
I tried to do this:
var slickEl = element[0]querySelector('.slick');
if(slickEl.length > 0)
because, looking at the debugging, the 'element' is so structured:
0:div length:1
In this way, I have not the error but the carousel doesn't build.
If You are using Jquery Carousel then it must be tipical jquery. So try:
slickEl=$(element).find(".slick");