I tried to add swiper.js to tab elements in Oxygen Builder but it is not scrolling to the end unless I set swiper.js to 'centeredslides:true' or 'loop:true' but loop breaks Oxygen Builder tabs.
Any ideas on how to fix this? Can provide video of error if needed..
jQuery(document).ready(function() {
const swiper = new Swiper('.swiper', {
// Optional parameters
freeMode: true,
slidesPerView: 8,
centeredSlides: true,
spaceBetween: 0,
direction: 'horizontal',
loop: false,
freeMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: ".swiper-scrollbar",
hide: false,
},
});
});
I am working on a project and using swiperJS to create a slider but the breakpoints are not working, your help would be very much appreciated. Everything else is working with the exception of the breakpoints......
Here is the code...
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".slider--container", {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
centerSlide: 'true',
fade: 'true',
grabCursor: 'true',
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0:{
slidesPerView: 1,
},
520:{
slidesPerView: 2,
},
950:{
slidesPerView: 3,
},
},
});
</script>
I want to make script work on every page without that these page need loaded;
I have owl caroussel script on my static folder, and i already put it in nuxt.config.js, here how i put it:
head: {
title: 'title',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [{
src: process.env.BASE_URL_ROOT + "/jquery-3.3.1.min.js",
type: "text/javascript"
},
{
src: process.env.BASE_URL_ROOT + "/owl.carousel.min.js",
type: "text/javascript"
},
{
src: process.env.BASE_URL_ROOT + "/main-script.js",
type: "text/javascript"
}
]
},
And there is the script on my main-script.js:
$(document).ready(function() {
$('.owl-menu').owlCarousel({
loop: true,
responsiveClass: true,
center: true,
items: 6,
nav: true,
dots: false,
autoWidth: true,
responsive: {
600: {
items: 6,
nav: true,
autoWidth: true,
center: true,
loop: true
},
}
})
$('.owl-video').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 10,
nav: true,
dots: true,
responsive: {
600: {
items: 3,
margin: 12,
},
},
navContainer: "#nav-conte",
navText: [
'<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
'<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
]
})
})
The caroussel work well on the page if the page is loaded, but if it come from nuxt navigation, the caroussel script not work anymore.
Solution that i used is MutationObserver that look at the change on the DOM; on my main-script.js:
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// my owl caroussel script
});
observer.observe(document, {
subtree: true,
attributes: true
});
Here, you're using some jQuery code that relies on selecting specific parts of the DOM. Meanwhile, nowadays front-end frameworks do handle the DOM in a different manner and relying more on the state or refs than actual querySelector.
Hence, I do not recommend even trying to wire it. You should probably try and use a Vue package to make the same kind of feature.
It will be probably less heavy (bundle-size), more easy to integrate with your Nuxt app and you will not rely on buggy and hacky behavior.
Check this list of Carousels: https://github.com/vuejs/awesome-vue#carousel
I do use vue-awesome-swiper, more on a heavier side but really complete.
Also, I don't know if you really need to have jQuery in your Nuxt app on top of Vue, but if you want a clean and simple way of installing it into your Nuxt app, you follow my other answer here: https://stackoverflow.com/a/68414170/8816585
EDIT, even owl carousel deprecates itself as you can see
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// your owl caroussel script
$('.owl-menu').owlCarousel({
loop: true,
responsiveClass: true,
center: true,
items: 6,
nav: true,
dots: false,
autoWidth: true,
responsive: {
600: {
items: 6,
nav: true,
autoWidth: true,
center: true,
loop: true
},
}
})
$('.owl-video').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 10,
nav: true,
dots: true,
responsive: {
600: {
items: 3,
margin: 12,
},
},
navContainer: "#nav-conte",
navText: [
'<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
'<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
]
})
});
observer.observe(document, {
subtree: true,
attributes: true
});
This worked for me. You can try. enter link description here
I have 2 problem when use owl carousel2 on mobile screen size and set rtl: true and center: true.
Problem 1: last slide (slide 5 on demo) not show when drag by mouse or touch.
Problem 2: If have one slide, then slide 1 not showing.
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
rtl: true,
center: false,
items: 4,
responsiveClass: true,
loop: false,
nav: false,
margin: 10,
lazyLoad: false,
autoplay: false,
autoplayTimeout: 10000,
smartSpeed: 200,
autoWidth: true,
responsive: {
0: {
items: 1,
center: true,
autoWidth: true
},
768: {
items: 2,
center: false,
autoWidth: true
},
992: {
items: 3,
center: false,
autoWidth: false
},
1200: {
items: 4,
center: false,
autoWidth: false
}
}
})
})
I create an example with js and css file from owlcarousel2.github.io with new owl carousel2 updates.
Demo problem:
https://jsfiddle.net/j7jg7ynb/6/
I'm building a video gallery using slider.io and I want that the video pauses if a user goes to next slide/video. I'm trying to use onSlideChangeStart and onSlideChangeEnd function however it is not working.
code:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 0,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
onSlideChangeStart: function (swiper) {
$('.swiper-button-next').click(function () {
$('video')[0].pause();
});
},
onSlideChangeEnd: function (swiper) {
$('.swiper-button-next').click(function () {
$('video')[0].pause();
});
}
});
onSlideChangeStart and onSlideChangeEnd you can check if any video is playing in next or prev slide then pause it.
working fiddle
onSlideChangeStart: function(swiper) {
if ($('.swiper-slide-next video')[0]) $('.swiper-slide-next video')[0].pause();
if ($('.swiper-slide-prev video')[0]) $('.swiper-slide-prev video')[0].pause();
},
onSlideChangeEnd: function(swiper) {
if ($('.swiper-slide-next video')[0]) $('.swiper-slide-next video')[0].pause();
if ($('.swiper-slide-prev video')[0]) $('.swiper-slide-prev video')[0].pause();
},
I found a solution for this by using the below method
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 0,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
onSlideChangeStart: function (swiper) {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
},
onSlideChangeEnd: function (swiper) {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
}
});