We Keep Coding

jQuery slick slider behaving weird

I am using Slick Slider for my product loop so the products can be a slider.
But on the page load there is a big white gap below the products, when i grab the products en start sliding the height is getting normal. Does any one know why it behaves like this?
Javascript:
$('.product-loop-home').slick({
dots: false,
infinite: false,
autoplay: true,
autoplaySpeed: 8000,
pauseOnFocus: false,
slidesToShow: 4,
slidesToScroll: 1,
});
Website URL: https://www.dev.ruitershopboxmeer.nl/
Thanks for your time!

hope this will help you =>
div.slick-track{
height: 500px !important; // height you want 500 is super
}
happy coding🎉

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');
});
});

How to Destory and Initialize Reveal.JS

I am using the Reveal.js for slide show. I have initailized the Reveal using the below code
Reveal.initialize({
history: false,
center: false,
controls: true,
mouseWheel: true,
transition: 'slide',
});
Once the slide show is completed i need to destory the Reveal (Stop/Close) and want to Initalize/Start whenever I want. How can I do this?

Prioritizing window.load functions

Sorry if this is a noob question (I'm a JS noob). Im working on a website in which the homepage consists of a preloader and a slideshow.
I've managed to set up both the preloader and the slideshow. However, I've noticed that both of them are being loaded at the same time. I need to find a way to first load the preloader and once the preloading is done, then start the slideshow.
I'm using (window).load on both functions but I would like to know if there's a way to prioritize how things area loaded.
Here's my working code:
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
});
jQuery(window).load(function() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
});
Regards,
Johann

You can combine them both inside a single jQuery(window).load, and choose to run the royalSlider setup function inside the wptime_plugin_remove_preloader function, after removing the preloader:
jQuery(window).load(function() {
//set up the preloader
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
//Remove the preloader
jQuery('#wptime-plugin-preloader').remove();
//Set up the slider after removing the preloader
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
});

Activate the preloader on window.onload and call the slideshow function from inside the preload function (Note: Untested!):
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
slideshow();
});
function slideshow() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}

Put your the code that loads the slideshow inside
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
//slideshow code here
}
$(window).load would wait for the page to load all the elements, which you do need for your javascript to work, because you have to make sure the elements you are referencing in your code already exist in the DOM. To chain functions call each next function from the last block of the one preceeding

jquery.easing jQuery conflict

I used according menu and slides in a single page. I used "easeOutBounce" from using jquery.easing.1.3.js to according menu.
Now the menu is working fine.
But it conflict with the Slider. I don't need this effect with the Slider. I don't know how to solve this issue.
I don't need "easeOutBounce" effect the Bottom slide of this URL.
The slide is not a problem when I remove this line $.easing.def = "easeOutBounce"; from my code. But I need this effect to according menu.
My code is
<script>
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('li.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script>
$(function(){
$('#slides_two').slides({
generateNextPrev: true,
pagination: false,
preload: true,
preloadImage: 'images/loading.gif',
generatePagination: false,
play: 10000,
slideSpeed: 3000,
effect: 'slide',
pause: 4000,
hoverPause: true
});
});
</script>

You can use slideEasing option for your slider. This is how your code would be with this option:
<script type="text/javascript">
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('li.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script type="text/javascript">
$(function(){
$('#slides_two').slides({
generateNextPrev: true,
pagination: false,
preload: true,
preloadImage: 'images/loading.gif',
generatePagination: false,
play: 10000,
slideSpeed: 3000,
effect: 'slide',
pause: 4000,
hoverPause: true,
slideEasing: "jswing"
});
});
</script>
Easing types you can see here.