Develop Reference

Swiper.js loop when slidesPerView is bigger than half of the amount of Slides

As it seems since version 9 of swiper.js you cannot loop through your slides if you do not have more than double the slides available than slidesPerView. So for example if I want to build a slider that shows 5 products at once, and want to loop through a list of 7 products I cannot do that. If I show just 1 or 2 products at once everything is fine.
This behavior seems to come from the new loop logic they implemented. Here is my configuration for the swiper:
const params =
modules: [Autoplay, Pagination, Navigation],
autoplay: {
enabled: false,
speed: 3000,
},
speed: 400,
navigation: true,
pagination:{
enabled: true,
dynamicBullets: true,
dynamicMainBullets: 4
},
loop: true,
spaceBetween: 30,
centeredSlides: false,
breakpoints: {
0: {
slidesPerView: 1,
},
[BREAKPOINT_WIDTH.extraSmall*16]: {
slidesPerView: 3
},
[BREAKPOINT_WIDTH.medium*16]: {
slidesPerView: 3
},
[BREAKPOINT_WIDTH.large*16]: {
slidesPerView: 5
}
},
};
Is there an option I overlooked? Or has somebody a solution for the problem?

Incorrect slides amount and slides overlay Swiper JS

guys!
I'm using Swiper slide JS, bu at first I created Joomla module with this script. And my slider works incorrect.
At first, I can't understand why if I display slidePerView: 4 - on my website displaying each slide with width 100%. It's strange.
All slides overlay each other. You can to see this on my screenshot:
Screenshot
This is link to my website: https://hmc.bold.com.sa/services/dental-services
It's more simple to look on website.
This is JS code:
<script> let swiper146 = new Swiper(".swiper-doctors", {
navigation: {
nextEl: '.swiper-button-next146',
prevEl: '.swiper-button-prev146',
},
spaceBetween: 20,
slidesPerView: 4,
effect: "fade",
hashNavigation: false,
history: false,
lazy: false,
autoHeight: false,
zoom: false,
rewind: false,
grabCursor: false,
loop: true,
loopPreventsSlide: true,
breakpoints: {1920: { slidesPerView: 4, spaceBetween: 20},} });</script>
Help me please to fix this issue. Thanks

owl carousel ignoring options when called in function

i have following code:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
callbacks: true
});
}
which works fine - as expected. But when i try to do something like this:
var onResize = function() {
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
});
}
$(window).resize(function() {
onResize();
});
then it just ignores the options. Dots are visible etc. Everything looks like it is with default options. Can somebody please help me with this?
Thanks

The resize function isn’t better! Besides, it makes no difference to your load to use media queries to show or hide. You should try it. Keep it simple.

extjs 6 modern combobox with infinite scrolling

Based on this comment from mitchellsimoens at sencha forums i tried to implement an infinite scrolling combobox in extjs 6.5.2 modern.
The thing is that setting the combobox store to a virtual store produces this error: Uncaught TypeError: a.setExtraKeys is not a function.
I also set the floatedPicker to:
{
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
disabled: true
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null
}
Is there a way to implement an infinite scrolling combobox in extjs 6 modern without changing the default picker to a grid?

OK this actually works:
floatedPicker: {
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
disabled: true
},
plugins: {
listpaging: {
autoPaging: true,
loadMoreText: 'More records..',
noMoreRecordsText: 'No more records.'
}
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null,
variableHeights: true
}
It's a bit ugly when loading but it works.
Also i used an Ext.data.store. Virtual store don't work with comboboxes.

Owl Carousel Infinity Loop for Wordpress Plugin

Looking to use an infinity loop for the latest Owl Carousel Wordpress plugin. I've downloaded Owl Carousel v2, which has the infinity loop implemented, but the functionality and the Javascript are very different from the Wordpress plugin's versions.
In v2, they list the loop as a default option, but there are no default options in the Wordpress plugin.
/**
* Default options for the carousel.
* #public
*/
Owl.Defaults = {
items: 3,
loop: false,
center: false,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,
margin: 0,
stagePadding: 0,
merge: false,
mergeFit: true,
autoWidth: false,
startPosition: 0,
rtl: false,
smartSpeed: 250,
fluidSpeed: false,
dragEndSpeed: false,
responsive: {},
responsiveRefreshRate: 200,
responsiveBaseElement: window,
responsiveClass: false,
fallbackEasing: 'swing',
info: false,
nestedItemSelector: false,
itemElement: 'div',
stageElement: 'div',
I'm not an expert in Javascript, so I am wondering if anyone could point me in the right direction.

Owl Carousel v2 has infinity loop feature that v1 doesn't have, I don't know what's kind of wordpress plugin you are using, please provide a link.
EDITED: There a latest plugin of owl carousel v2 with foogallery as optional for wordpress
https://wordpress.org/plugins/foogallery-owl-carousel-template/