We Keep Coding

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

Can I use an if statement to change the API options of the Swiper javascript slider?

Sorry if this is a dumb question. I'm using the Swiper javascript slider, developed by iDangerous. It comes with an initialization field that I have in my HTML file, in it are the initialization options for the slider.
I'm in a situation where I need to search the webpage for a certain element called #editor-content. If the element is found, I need the simulateTouch option of the Swiper initialization to be set to false. If the element is not found, the stimulateTouch option should be set to true.
I am using jQuery to accomplish the finding-the-element. I'm using if(($('#editor-content').length)){...} to accomplish this. This part works just fine.
Here is what the Swiper initialization looks like...
<script>
swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// This is the option that needs to be set to true/false depending on whether the #editor-content element exists in the webpage or not...
stimulateTouch = false;***
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
So far, I've tried to initialize the slider differently based on outcome. If it finds the element, initialize the swiper with the option disabled. If it doesn't, initialize the swiper with the option enabled. That didn't work (see code below--and I'm very sorry for the indentation mess):
<script>
var swiper = undefined;
function initSwiper() {
// If the jQuery detects an #editor-content element (meaning you're in the editor...)
if((jQuery('#editor-content').length)){
swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// Element found, so initialize the slider with option below set to false
simulateTouch = false,
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
} else {
var swiper2 = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// Element not found, so initialize the slider with option below set to true
simulateTouch = true,
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
}
// Initialize the function
initSwiper();
</script>
I'm expecting the slider to have the stimulateTouch option set to false when the #editor-content does exist, and have it set the option to true when the element in the body does not exist. But so far my attempted code is just making the entire slider js not function. Help?

If you run your code through a Javascript validator (such as this: http://esprima.org/demo/validate.html) you'll find you have a syntax error on line 12.
stimulateTouch = false,
needs to be
stimulateTouch: false,
as per the other properties.
Just FYI, you may want to look into using Chrome Developer Tools or some other debugging tool to pick up small issues like this. The console will let you know if you have any syntax errors, and you can use the debugger to set breakpoints and step through your code line by line so you can find the exact spot where things start to go pear-shaped.

Lazyload cutting off image height when dynamic height is turned on

When I enable Lazyload on my image slideshow with the dynamic height enabled, it cuts off and only shows a fraction of the photo height, I have attached a screenshot, if the initial load you can view the images perfectly, please use the toggle arrows and you will be able to see what I mean.
I have been trying various fixes to no avail and as this was a html theme I purchased, unfortunately, the theme author has also not been able to help me, your help will be much appreciated.
The JS I have in my custom script file is:
$(".property-carousel").owlCarousel({
rtl: _rtl, items: 1, lazyLoad : true,
responsiveBaseWidth: ".property-slide", dots: false,
autoHeight: true, nav: true, navText: ["", ""], loop: true
});

I also had this problem, "lazyLoad" combined with "autoHeight" cut off some images because the lazy-loaded images' heights weren't taken into account by the owl carousel. For me, this works (modification of the answer from #baduga):
var myCarousel = $(".property-carousel").owlCarousel({
lazyLoad : true,
autoHeight: true
});
myCarousel.on('loaded.owl.lazy', function(event) {
myCarousel.trigger('refresh.owl.carousel');
});

try to add auto height on function
owlCarousel({
items: 1,
loop: true,
autoHeight: true
});
set auto height true
autoHeight: true

You need to set lazyload true in OwlCarousel:
lazyLoad: true
Go to the documentation for more.

Here's my solution of the problem:
gallery.owlCarousel({
margin:5,
loop:false,
autoHeight:true,
items:1,
nav: false,
dots: false,
lazyLoad:true
});
gallery.on('loaded.owl.lazy', function(event) {
$(this).find('.owl-item.active img').one('load', function () {
gallery.trigger('refresh.owl.carousel');
});
});

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

AnythingSlider Fx Transition Flicker

On the first rotation of slides there is small flicker that occurs during the Fx transition. It seems to only occur on the first rotation of slides & goes away after the first repeat.
Demo Page: http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html
Any ideas? I haven't been able to figure it out so far.
Thanks in advance!

Try changing your mode to fade (demo):
$(function () {
$('#slider').anythingSlider({
mode: 'fade',
autoPlay: true,
delay: 2000,
pauseOnHover: false,
buildStartStop: false,
buildArrows: false
}).anythingSliderFx({
'.left .content-wrapper': ['left']
}, {
timeIn: 300,
timeOut: 350,
stopRepeat: true
});
});