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🎉
Related
I have a Shopify website and I've added a .js file which holds few javascript functions, how can I tell a <script> which function to call on demand?
I've added the file to <head> like so:
<script src="/urls/for/custom-scripts.js" defer="defer"></script>
And I want to run different functions on different pages when the page is loaded, for example, inside main-product.liquid I want to run only ".aone-slide" and on blog.liquid I want to run only ".ul.accordion", how is this possible?
I've tried to do something like that:
<script>
!function(o) {
console.log("theme.liquid last </body> script -> DOMContentLoaded");
o.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded event listener added successfully!");
$(document).on('ready', function() {
});
});
}(document);
</script>
But I don't know how to continue because the name of the function or the trigger is a div/css class.
This is the file:
(function($) {
$(".aone-slide").slick({
dots: !0,
infinite: !1,
arrows: !1,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
}), $("ul.accordion").accordion(), $(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: !1,
fade: !0,
asNavFor: ".slider-nav"
}), $(".slider-nav").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: ".slider-for",
dots: !1,
centerMode: !1,
focusOnSelect: !0,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
}]
})
})
I think you're confusing what a Javascript function is.
In your .js file you have only one function. This particular function is applying a slider (using the slick library) to different html elements. And it is doing that automatically when jQuery ($) is ready.
For example the first .slick call is creating the slider on the elements with class aone-slide.
So the first problem is this, if the .js is loaded (and the code you're showing seems to be correct) it should already work. It should already create the sliders, on all the pages. If it doesn't there is something missing (but I don't have enough elements to tell).
If you want to run slick only on the selected pages you should create functions inside your .js file and call them in the pages.
So your .js would become something like this
function slickAone(){
$(".aone-slide").slick({
dots: !0,
infinite: !1,
arrows: !1,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
});
}
(without function ($)...)
and then in your page yout put
<script>
function($){
slickAone();
}
</script>
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');
});
});
I am facing an issue in slick function.
There are two tabs, inside that i have created carousel dynamically. For the first tab,slick function is triggered on ready function but for the second tab, i have set a timeout function. On click of the second tab, carousel is dynamically created.
below is the function used,
function renderSlick() {
setTimeout(function () {
$('.item2').slick({
dots: false,
arrows: true,
swipe: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
infinite: false,
variableWidth: true,
});
}, 200);$(".item2 > .slick-next").on('click', '#challenge-second-div', function () {
console.log(4)
});
in this, slick next is not getting triggered. It is not going inside this click function. Please do suggest some solution.
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?
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
});
});