Develop Reference

SwiperJS not sliding over iFrame

I have implemented Swiper in NuxtJs. I have to embed ads in the form of iFrame in slides. But my swiper stuck at iFrame. It is not sliding over the iframe.
I have tried adding scrolling='no' to the iframe, but it didn't work.
Also I want to hit the events of the iframe
My Code
new Swiper(this.$refs.swiper, {
slidesPerView: 'auto',
spaceBetween: 20,
centeredSlidesBounds: true,
centerInsufficientSlides: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
direction: 'horizontal',
mousewheel: true,
observer: true,
observeParents: true,
freeMode: true,
parallax: true,
initialSlide: slideNumber,
keyboard: {
enabled: true
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true
},
loopFillGroupWithBlank: false,
pagination: {
clickable: true
},
autoHeight: true,
modules: 'modules',
on: {
activeIndexChange: function (swiper) {
vm.listenAds()
setTimeout(() => {
swiper.params.centeredSlides = true
swiper.update()
}, 100)
},
afterInit: function (swiper) {
setInterval(() => {
swiper.update()
}, 100)
}
}
})
}```

owl carousel - not show last item when is rtl and loop is false

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/

How to trigger after functions with Owl Carousel 2?

I use a owl carousel and I want to detect the first and last elements when active. I'm trying to trigger a function with the afterAction attribute but I cannot make it happen.
This is the initialiser:
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
},
afterAction : afterAction
});
function afterAction(){
console.log("owl after action");
}

For the first and last "elements" that are visible in the carousel:
In the afterAction function this.visibleItems returns an array of the visible items displayed in the carousel. The first visible item will always be at array position 0 and the last will be the length - 1.
function afterAction() {
var first = this.visibleItems[0];
var last = this.visibleItems[this.visibleItems.length - 1];
console.log(first, last);
console.log($('.owl-item')[first], $('.owl-item')[last]);
}
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
},
afterAction : afterAction
});

You can access the elements inside the carousel (I'm assuming you're referring to the panels) like this $('#carousel .owl-item:first) and $('#carousel .owl-item:last). To create the carousel and trigger a function only after the carousel is built try the method below.
var exampleApp = {
createCarousel : function(options) {
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
}
});
this.afterwards(options.passedStr);
},
afterWards : function( testStr ){ // passedStr becomes testStr here
console.log('afterwards method ',testStr );
},
init : function (options) {
this.createCarousel(options);
}
}
exampleApp.init({"passedStr":"singleton pattern"});
This is a JavaScript Singleton pattern.

Owl-Carousel, scroll two items at a time

I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well.
I want the owlCarousel to work like this:
It should scroll 2 items at a time, showing 2 items at a time.
So: [0,1] slide [2,3] slide [4,5]
On mobile, it should show one picture and scroll by 1 picture at a time.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true
},
640: {
items: 2,
navigation: true,
nav: true
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)

You can use the slideBy option.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true,
slideBy: 1 // <!-- HERE
},
640: {
items: 2,
navigation: true,
nav: true,
slideBy: 2 // <!-- HERE
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)

twitter's profile widget include in a separate javascript file

I'm just trying to put the custom twitter's profile widget on my page, but I like to put the code in a separate javascript's file.
so, I don't know how to do that.
I mean, I put this on head tag
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
the create a div for the widget, an put the rest of the code in another javascript
new TWTR.Widget(json_twitter_options).render().setUser('username').start();
But, how to "put" the result in that widget... I'm totally lost, thanks in advance.

The solution for me was simply to add an "id" property to the options object of an element that you want the widget to render into. This way you can even load the script with require.js or after the page loads and still render the widget into the space you want.
I didn't find any documentation for this property by the way.
ex:
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
},
id: 'someDivId'
}).render().setUser('comster').start();

The js file doesn't have to be in the head just above the widget
this code works I have tested it:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();
</script>

Ok, It seem my question was not understand.
I couldn't do what I want. But the way to simplify my problem, was creating a json object for setting up the widget.
I'm still want to find a way to not use script tag inside body tag
thanks a lot to viewvers!

Just put the entire code into a new javascript file (name it anything you like, like twitter.js), and link it in where you want it to display, like under
<div id="twittercode">[js file link goes here]</div>
This whole chunk should go into a new javascript file.
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();