We Keep Coding

swiper.js start/stop autoplay in loop mode

I have a gallery page with 16 swiper galleries.
I call swiper in loop mode of course with activated lazy-mode.
Now, when I hover over a gallery, I want that only this selected gallery starts the autoplay.
I can only managed to get all galleries to autoplay. But I want that only the activated gallery (mouseover) starts the autoplay.
I've tried "realIndex" or "activeIndex" but I keep getting an error message.
Maybe I'm just not using that correctly.
Here my Swiper setup:
$('.swiperFront').each(function (index) {
var frontSwiper = new Swiper($(this)[0], {
effect: 'fade',
slidesPerView: 1,
spaceBetween: 0,
lazy: true,
allowTouchMove: false,
centerInsufficientSlides: true,
centeredSlides: true,
centeredSlidesBounds: true,
disableOnInteraction: true,
});
$(".swiperFront").mouseenter(function(){
frontSwiper.autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper.autoplay.stop();
});
});
I tried following changes:
$(".swiperFront").mouseenter(function(){
frontSwiper[realIndex].autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper[realIndex].autoplay.stop();
});
$(".swiperFront").mouseenter(function(){
frontSwiper[activeIndex].autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper[activeIndex].autoplay.stop();
});
$(".swiperFront").mouseenter(function(){
frontSwiper.activeIndex.autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper.activeIndex.autoplay.stop();
});
$(".swiperFront").mouseenter(function(){
frontSwiper.realIndex.autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper.realIndex.autoplay.stop();
});
None of these changes work and I don't want to invoke a separates swiper setups for each gallery.
I already googled for a solution but all the solutions don't refer to the loop variant
Any ideas?

Swiper not working on browser is resized to Smartphone view in chrome

I'm having some issue now in my swiper. I'm currently on test phase and my swiper is not working when the window is changed to smartphone and I have to refresh my browser to make the swiper work again. Is there any way I can re initialize my swiper to adapt to the new browser type? Here's what I have:
var swiper = new Swiper('.swiper-container', {
effect: 'slide',
direction: 'horizontal',
loop: true,
simulateTouch: true,
slidesPerView: 1,
spaceBetween: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChangeTransitionEnd:function() {
//other codes
}
}
});
I have tried
setTimeout(() => {
swiper.update()
}, 500)
and
$(window).resize(function(){
swiper.reInit()
})
$(window).trigger("resize")
but they are all not working. Can you help me figure out what I'm missing? or is it really needed to refresh the page to make the js adapt to its new browser environment?
Slider only works if clicking the previous or next button but not on drag.

Try this
let resize = function () {
// Whatever you like to do
}
window.onresize = resize
You can read more about resize event here
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

slider not working inside tab inside tab content

Im building a web app using the NativeDroid . Everything seems to be working fine but inside a tab panel, when i add a slider it doesnt work.
But it works when i refresh. But when i click the link through the menu it doesnt work until i refresh it
I have uploaded the pages over here Demo from the menu when u click on profile you will see the slider is not working.. There are no jquery errors on my console too.
below is code that i have used for the slider and a chart
$(document).on("pagecreate", ".page_bubble", function () {
$('.demo').percentcircle({
animate: true,
diameter: 100,
guage: 2,
coverBg: '#f4f8f9',
bgColor: '#f4f8f9',
fillColor: '#5c93c8',
percentSize: '19px',
percentWeight: 'normal'
});
$("#owl-demo").owlCarousel({
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
navigationText: ['']
});
});
Can someone tell me what might be causing it?

el.on("click",".nd2Tabs-nav-item:not('.nd2Tabs-active')",function(e) {
e.preventDefault();
_self.switchTab($(this),$(this).data('tab'),$(".nd2Tabs-nav-item").index($(this)[0]));
});
This is the event in nativedroid2.js where you need to add your percentcircle and owlCarousel binding event as below as #rory-mccrossan said on page load content doesn't exist that's reason it's not working change you js like below
el.on("click",".nd2Tabs-nav-item:not('.nd2Tabs-active')",function(e) {
e.preventDefault();
_self.switchTab($(this),$(this).data('tab'),$(".nd2Tabs-nav-item").index($(this)[0]));
$('.demo').percentcircle({
animate: true,
diameter: 100,
guage: 2,
coverBg: '#f4f8f9',
bgColor: '#f4f8f9',
fillColor: '#5c93c8',
percentSize: '19px',
percentWeight: 'normal'
});
$("#owl-demo").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
navigationText: ['']
});
});
Or You can make a delegate event and trigger that event here for more info please find This Answer

Carousel Loop Issue (Items disappear after one loop)

So I used a tutorial from codrops to create a carousel. I am not super savvy with JS or using anything JS related without reference code, so I merely adopted and modified the existing code from the tutorial. The issue that I am having is relating to the loopback. While using the carousel cycling through, the content works fine, but when you open one of the items and cycle through, it causes the carousel to get out of order.
Huge problem because items start disappearing when you press left-right. Anyone able to help on this one?
Below is the code I'm using on the site page.
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery.carouFredSel-packed.js'></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#leaderthumbs').carouFredSel({
synchronise: ['#leaderdetails', false, true],
auto: false,
width: '100%',
items: {
visible: 3,
start: 0
},
scroll: {
onBefore: function (data) {
data.items.old.eq(1).removeClass('selected');
data.items.visible.eq(1).addClass('selected');
}
},
prev: '#prev',
next: '#next'
});
jQuery('#leaderdetails').carouFredSel({
auto: false,
items: 1,
scroll: {
fx: 'fade'
}
});
jQuery('#leaderthumbs div').click(function () {
$('#leaderthumbs').trigger('slideTo', [this, -1]);
});
jQuery('#leaderthumbs div:eq(1)').addClass('selected');
});
</script>

Insert a script into the DOM that calls AJAX

We have a tool that allows people to add code to a dynamic page.
A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...
I need to solve this.
Here is an example. Create a page with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>
Then paste this into the input and you'll see what I mean:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>

The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.
Here is a quick and dirty hack that will force it to work (tested in FireFox):
$(function(){
document.write = function(c) { $('#putWidget').append(c) };
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
Notice, I'm simply overriding the document.write function after the page is done loading.