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/
Related
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
As I stated here, I'm having trouble in disabling gestures totally on lower resolutions.
By using breakpoints in conjunction with as said "dedicated API touch options" such as touchRatio, shortSwipes/longSwipes, allowTouchMove, allowSlidePrev/next don't produce the expected results. This is the current implementation:
swiperProject = new Swiper('.headline__container', {
direction: 'vertical',
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 500,
lazy: true,
preloadImages: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
// I tried with allowTouchMove: false, allowSlidePrev/next: false too, but nothing
touchRatio: 0,
shortSwipes: false,
longSwipes: false
},
992: {
touchRatio: 1,
shortSwipes: true,
longSwipes: true
}
}
});
Basically, my goal is to deactivate gestures on mobile in order to prevent the scrolling blocking of the body itself - these slides are currently set on vertical mode.
Anyone know how to achieve this? I read the above tries on other questions, but they don't helped me.
Thanks in advance for any help.
For now I forced pointer-events: none on mobile. Hope in the next future the team will fix these API options soon.
Thanks everyone for the attention.
I have the following carousel
I want to disappear the one of the navigation arrows when there are no items on their left/right sides.In screenshot exampe above if i try to use the left arrow it's not looping, because there are no images on the left side, so the arrow should not appear.
Here are the settings i'm currently using
Navigation.Defaults = {
nav: false,
navRewind: false,
navText: [ 'prev', 'next' ],
navSpeed: false,
navElement: 'div',
navContainer: false,
navContainerClass: 'owl2-nav',
navClass: [ 'owl2-prev', 'owl2-next' ],
slideBy: 3,
dotClass: 'owl2-dot',
dotsClass: 'owl2-dots',
dots: true,
dotsEach: false,
dotData: false,
dotsSpeed: false,
dotsContainer: false,
controlsClass: 'owl2-controls',
loop: false,
};
Try with the css like below.
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
display: none !important;
}
Or you can do that with js from this answer https://stackoverflow.com/a/28027976/9695286
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.
I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.
If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};