Develop Reference

tiny slider vertical slider large layout shifts.. how to fix?

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

Slider Revolution carousel override single slide transition type

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

Two bugs in scrollable accordion in ExtJS 6

I hit what seems to be two bugs. Here is a fiddle which demonstrates these bugs. First of all, if you click on the first panel or any other ones, you will see there appear some new panel with a missing title:
And the second bug, is that it is impossible to see the contents of the panel (one textfield, which I put to every panel). The code is as simple as:
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
layout: "fit",
items:[{
xtype: "panel",
layout: {
type: "accordion"
},
scrollable: true,
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: i,
items:[{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
So, the question is how to fix it all?

The outer window should not have a fit layout as this will interfere with the way the accordion layout works as it uses more or less vertical space depending on the user's actions. Also, the accordion should not have scrollable set to true as it is the parent window that should scroll.
The title you are using for the items in the accordion are seen as integer values in JS and so the 0 is not being interpreted as you would like when used in a title (which expects a string). Explicitly converting i to a string will ensure the 0 shows correctly.
In summary, the following changes will enable your code to work better:
On the outer window: remove the layout:fit and add scrollable:true.
On the accordion: remove the scrollable:true.
On the items in the accordion: ensure the title is consistently converted to a string.
See updated fiddle here.
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
scrollable: true,
items: [{
xtype: "panel",
layout: {
type: "accordion"
},
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: 'box ' + i,
items: [{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();

JQuery rcarousel duplicates slides

I've used the rcarousel plugin a couple of times without encountering any problem.
While implementing it on a new website, rcarousel suddenly duplicates the first slide (I'm showing 3).
This is happening on both slides on the bottom of this page:
http://www.expertmarketermagazine.com/en/home
When you navigate the slider you can see that the "duplicate" reverts to the correct slide just before the whole thing slides away.
Has anyone encountered something similar before?

change your rcarousel selectors to:
<script>
$(function() {
$("#carousel-authors .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-authors",
next: "#ui-carousel-prev-authors"
}
});
$("#carousel-books .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-books",
next: "#ui-carousel-prev-books"
}
});
});
</script>

Adding An Active Class To A Mootools Accordion Element

With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.
I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.
The mootools code I've got so far is:
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});
If anyone can help with this, I'd be most appreciative.

Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:
onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },
This gives me what I need.