I am using tiny slider and the vertical slider option causes large layout shifts while loading. I get this message in Google Page Speed "Avoid large layout shifts". I would like to fix. Please can someone recommend a fix?
I have 2 vertical sliders next to each other and 1 stretches below the viewport while loading.
Demo link/slider setting:
https://codepen.io/matt-giggs/pen/wvyMBzR
jQuery(window).bind("load", function() {
if (document.querySelectorAll('.tiny-slider').length > 0) {
const slider1 = tns({
container: ".tiny-slider",
items: 3,
slideBy: 1,
axis: 'vertical',
autoplayDirection: 'forward',
"mouseDrag": false,
"swipeAngle": false,
"speed": 500,
"autoplay": false,
touch:false,
autoplayButtonOutput : false,
nav: false,
loop: true,
autoHeight:false,
autoWidth:false,
preventActionWhenRunning : true,
preventScrollOnTouch : 'auto',
controlsContainer: '.slider-controls',
onInit: function (info) {
}
});
}
});
Here's how it looks when loading -
Loaded -
You need to set static height for .tiny-slider class
Related
I'm using the Slider Revolution jQuery plugin (not WP plugin) and set sliderType:"carousel" on my slider.
I want to use a fade transition when restarting the slider, when it goes from the last slide to the 1st again. All transitions
I tried setting data-transition="fade" on slide 1, but that didn't work.
How can this be accomplished? Thanks! Here's my code:
revapi1078 = tpj("#rev_slider_1078_1").show().revolution({
sliderType:"carousel",
carousel: {
maxVisibleItems: 1,
infinity: 'on',
stretch: 'on',
fadeout: 'off',
},
horizontal_align: 'left',
jsFileLocation:"revolution/js/",
sliderLayout:"auto",
minHeight: '1496',
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
mouseScrollReverse:"default",
onHoverStop:"off",
touch:{
touchenabled:"off",
},
arrows: {
style:"hesperiden",
enable:true,
hide_onmobile:false,
hide_under:600,
hide_onleave:false,
hide_delay:200,
hide_delay_mobile:1200,
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
},
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%",
presize:false
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth: 2048,
gridheight:[600,600,500,400],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop: 'off',
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle:"off",
autoHeight:"off",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
click here
I am currently using slick-slider to display content in 3 columns. I am doing this using (flexbox) Essentially - I only want the slider to be activated on mobile view, therefore when the users shrink(resize) the screen down to mobile view the flexbox 3 columns turn into a slider, displaying one slide at a time.
The problem I am having when the user opens the screen back to desktop view, the slides do not come back up, they seem to get lost in the slider on mobile view.
what I want to happen is for it to wait until the user has resized the screen to 649 then when it resizes back to 651 it unslicks
$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: 3,
slidesToScroll: 3,
speed: 800,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
}, {
breakpoint: 650,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}],
});
$(window).on('resize', function() {
var win = $(this);
if (win.width() >= 650) {
$(slider).slick('unslick')
};
});
I believe unslick() is the right function.
$(slider).unslick();
We are using owl slider in tabbing but its not working when moving to another tab and again come back to the tab of the slider.
Slider all items hide when coming back to slider tab.
We have tried below code but its not working.
var owl = $('.frame_wrapper .options-list');
owl.owlCarousel({
margin: 10,
nav: true,
loop: false,
responsive: {
0: {
items: 2
},
300: {
items: 3
},
600: {
items: 5
},
1000: {
items: 6
}
}
});
owl.trigger('refresh.owl.carousel');
Any help will be appreciated.
Thank you.
Just in case if somebody is looking for the help. Owl2 doesn't have re-init options. You can use workaround - trigger "destroy.owl.carousel" event and then initialize it again:
function reinit() {
var el = $('.frame_wrapper .options-list');
el.trigger('destroy.owl.carousel');
el.owlCarousel({...});
}
I'm trying to enable Slick Slider (slick.js) to initiate only over 520px wide. Anything below that and the slides just stack (i.e. no slick). Is it possible so that it can work without refreshing the page?
I've done this, which works when dragging the browser (narrow) below 500px, but when I move it over 500px it doesn't re-initiate without refreshing the page...
$('.slick').slick({
autoplay: true,
autoplaySpeed: 4000,
delay: 5000,
speed: 700,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
Is there a way around this?
I'm using https://github.com/kenwheeler/slick
You can try to reconstruct it when the window is resized above 500. This seems to work in my demo.
JSFiddle Demo
function slickify(){
$('.slick').slick({
autoplay: true,
autoplaySpeed: 4000,
delay: 5000,
speed: 700,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
}
slickify();
$(window).resize(function(){
var $windowWidth = $(window).width();
if ($windowWidth > 500) {
slickify();
}
});
I'm running this script on a page which shows a box with more information when you roll over it.
site for review
The script works fine, except theres a flicker of the box before it actually scales.
What is causing this? I use the same thing in the main navigation with the same flicking.
Any ideas whats causing this?
//work page springing box
$$('.box').each(function(s) {
var more = $(s).down(2);
$(s).observe('mouseenter', function(e) {
$(more).show();
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
});
$(s).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks.
Rich
I should note, I am testing in Safari 4.0.4
#Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:
$(more).show.bind(more).delay(0.01);
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
})
The site looks fine to me. I did notice a very little something, but it could be my imagination.
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
$(more).show();
You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.
Firefox, fully updated btw.