If im using something like this with breakpoints, is it possible to set a rule between say 200 and 320? So that everything between 200 and 300 would be affected like with media queries.
$('.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
}
}
]
});
Use window.innerWidth to get the width on resize, then just wrap a few if statements around it to set your mins and max:
var w = window.innerWidth;
if((w > 200)||(w <300)) { do something }
then you can use
window.onresize = function(event) {
myChangeFunction();
};
hope this helps
Related
I have team-member-slick.js file.
I it has below code ( full code ) :
$(document).ready(function(){
$('.vertical-center-4').slick({
centerMode: false,
slidesToShow: 2,
infinite: true,
rtl: (document.dir === 'rtl'),
slidesToScroll: 2,
//speed: 300,
autoplay: true,
autoplaySpeed: 3000,
variableWidth: false,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: false,
arrows: false,
variableWidth: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
as below an example code, I must change showing number value with php from a php file:
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
all slidesToShow: 3, numbers must be depend a php variable because I will write a control panel this number.
So, how can I access js number variable from php file?
I will change the number with php saving ( after save button clicking ) then, the variable will load from server after re-load the customer page to change slide showing item number.
I used slick slider on my React project, i have breakpoints, if on 480 screens infinity loop is true selected clone element, i want my first element in slider started not clone. Who i can it ?
var settings = {
dots: false,
infinite: false,
initialSlide: 0,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
adaptiveHeight: true,
variableWidth: true,
arrows: products.length > 4 ? true : false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
}
},
{
breakpoint: 600,
settings: {
infinite: true,
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
You can catch the breakpoint event and then check if the window width is less or equal than 480px. Then, you set the slide you need.
(Call it at least once to check if it's starting at a >480px device).
I assume you are using jQuery because of Slick Slider.
$my-slider.on('breakpoint', function(eventick, breakpoint) { // if breakpoint change
setSlide();
});
function setSlide() {
if ($(window).width() <= 480) {
$('.my-slider').slick('slickGoTo', 1); // the number of slide you need
}
}
setSlide(); // call it once at least
Hope it help you somehow.
I create a testimonial slide by react-slick.
My code is:
const settings = {
dots: true,
adaptiveHeight: true,
swipeToSlide: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoPlay: true,
className: 'sample'
};
Everything works fine. However, when I resize my browser, the width of slide does not change. I check in my console.log, the width of slick-track is always 9900px. I think the width should be changed when I resize my browser.
Could anyone help me to solve this? I think I have a problem with re-render element when resizing browser in reactjs :(.
Thanks
If your goal is to change react-slick options when you resize the browser, use responsive option.
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024, // width to change options
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
}
]
}
https://react-slick.neostack.com/docs/example/responsive/
I am using slick carousel for my page navigation links and my current active menu item has "active" styling to show what page i am on.
The problem is that if i click on a menu item that was off screen on the slick track, slick would initialise its position on page reload and you would not see the "active" menu item selected which i don't like.
My solution was to simply use 'slickGoTo' method on page load, where i would capture the 'data-slick-index' attribute value and use it with 'slickGoTo' method which should solve the problem.
However, what seems to happen is if the slick item i clicked on was visible on page then the 'slickGoTo' method works just fine. But, if the item is off page it does not work.
// service menu slick slider
function service_menu_slick() {
$('#service-menu').slick({
prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',
slidesToShow: 7,
infinite: false,
responsive: [
{
breakpoint: 1250,
settings: {
slidesToShow: 6,
infinite: false
}
},
{
breakpoint: 1100,
settings: {
slidesToShow: 5,
infinite: false
}
},
{
breakpoint: 850,
settings: {
slidesToShow: 4,
infinite: false
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 3,
infinite: false
}
},
{
breakpoint: 550,
settings: {
slidesToShow: 2,
infinite: false
}
},
{
breakpoint: 450,
settings: {
slidesToShow: 1,
infinite: false
}
}
]
});
$serviceSlide = $('#service-menu');
if ($serviceSlide) {
slideIndex = $('.current_page_item.slick-slide').attr('data-slick-index');
console.log(slideIndex);
$('#service-menu').slick('slickGoTo', slideIndex);
}
}
Ive been reading up on opera mini and running javascript on it.
https://dev.opera.com/articles/opera-mini-and-javascript/
The opera website says you can add an event listener to your scripts and have them resume on a user initiated action.
What actions would be supported by opera mini that i can use to resume a script and how do i integrate the event listener into my current js?
For example i have this image carousel which had this script on my page:
<script type="text/javascript">
$(document).ready(function(){
$('.responsive-mq').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
lazyLoad: 'ondemand',
autoplay: true,
autoplaySpeed: 2000,
mobileFirst: true,
responsive: [
{
breakpoint: 1024,
settings: {
speed: 300,
slidesToShow: 5,
slidesToScroll: 5,
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 2000
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
},
{
breakpoint: 500,
settings: {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 199,
settings: {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
autoplay: true,
autoplaySpeed: 2000
}
}
]
});
});
But then has its own js file with heaps of scripting in it.
Would i only have to use the listener on the on page script?
I'm only a beginner with js so please keep that in mind.
Basically when you load a webpage in Opera Mini, then you get something like a screenshot of it. This screenshot may be reloaded on user action (like click or form submit), but will not reload automatically, so it would be best if you disabled carousel for Opera Mini users. You can just stack slides one under each other. This way users don't have to reload the page to see the content.
You could probably modify your code like so:
var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]";
if (!isOperaMini) {
$('.responsive-mq').slick(...);
}
But remember to check this in Opera Mini as I'm not entirely sure it will work with your site and this Slick plugin.