I've been banging my head all long trying to solve this issue.
Basically I'm using Slick Carousel and Blazy lazy load together to display some background images in a carousel.
Now before you answer, I'm well aware Slick comes with lazy loading, but I've run in to problem using it with background images so I'm running with Blazy instead.
The problem
I can get slick and blazy working together https://jsfiddle.net/a4emf9qu/ , no worries, but when you drag (or click on the dot controls) to the third image (or beyond) the background images don't load unless you scroll or resize the window and I just don't know why.
Through some digging on the blazy website I see that this could be a solution but I'm unsure on how to implement it -
Either call revalidate which validates the document again or trigger the newly added item(s) with the .load() method:
var bLazy = new Blazy();
bLazy.functionName(); //bLazy.revalidate(); or bLazy.load(element);
Can anyone out there help me out?
$(document).ready(function(){
$('.slider').slick({
dots: true,
arrows: true,
infinite: false
});
});
;(function() {
// Initialize
var bLazy = new Blazy();
bLazy.revalidate();
})();
Turn's out it was a pretty simple fix. Just had to listen to the afterChange event and then fire bLazy.revalidate(); again. Example here - https://jsfiddle.net/a4emf9qu/1/
$(".hero-slick").slick({
dots: true,
arrows: false,
lazyLoad: 'ondemand',
// autoplay: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
// Init BLazy for lazy loading
// Initialize
var bLazy = new Blazy({
container: '.hero-slick' // Default is window
});
$('.hero-slick').on('afterChange', function(event, slick, direction){
bLazy.revalidate();
// left
});
Just got stuck there and found a cool solution with selector.
HTML
<ul class="slider">
<li class="slide-item">
<img class="b-lazy" data-src="image/imag.jpg">
</li>
</ul>
for Slick slider
var slider = $(".slider");
slider.slick({
lazyLoad: 'ondemand',
});
var bLazy = new Blazy({
selector: '.b-lazy',
});
slider.on('afterChange', bLazy.revalidate);
for owl carousel
var owl = $('.slider');
owl.owlCarousel({
autoplay: false,
});
owl.on('changed.owl.carousel', bLazy.revalidate);
check out the owl live
Related
My site http://mytempsite.temporary-domain.com
The above page has two images displaying using Owl Carousel but i cant figure out whats going wrong here as i am using examples from the web, so i could have introduced something wrong here.
My carousel setting is
<script>
$(document).ready(function() {
$('#banner').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items: 1,
smartSpeed: 1000,
autoplay: true,
autoplayTimeout: 6000,
dots: true,
nav: false,
//loop: true,
mouseDrag: false,
touchDrag: false
});
});
</script>
Two images display when they should be sliding across. I am using the latest version of Owl Carousel so not sure if Owl Carousel is the problem or something else? I checked my HTML which looks to be fine and no errors in the Console window (using Chrome)
I have stripped off almost everything from the site to its basic bare bones along with the current Javascript, JQuery, CSS left intact. Any ideas whats going wrong here?
I am not seeing the two CSS files in your source code that the Owl Carousel documentation says are needed for a successful installation (source). You will need to include the following in your <head>.
<!-- change paths to reflect your setup -->
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
Having a difficult time trying to decipher this. Recently, I took over two websites. Both use the same custom coded WordPress theme. Recently, I changed one of the hero areas to a slider using the pre-existing slick.js script the previous developer installed. After I did that, the left and right arrows, nor the dots would appear. They're supposed to appear dynamically like at http://dermalinfusion.com/. The code it would generate would be something like:
<button class="slick-prev slick-arrow" type-"button" data-role="none" aria-label="Previous" role="button" style="display: block;"></button>
However, on https://envymedical.com, they simply don't appear at all. I changed around the settings in the plugins.js file because I saw arrows: was set to false, but no luck there either. Here's the code:
jQuery('.block-heroslider').each(function() {
var $this = jQuery(this);
var $imagesSlider = $this.children('.hero-images-slider');
var $blurbsSlider = $this.children('.hero-blurbs-slider');
$imagesSlider.slick({
dots: true,
autoplay: true,
autoplaySpeed: 6000,
asNavFor: '.hero-blurbs-slider',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true
});
$blurbsSlider.slick({
asNavFor: '.hero-images-slider',
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
});
The slider does overall work. It does move from slide one to two and back again every few seconds. I'd just to figure out why the navigation does not appear.
NOTE: I should mention we've got a ZenDesk script running that somehow is throwing an error. I deleted that code from my header.php file in my WP theme and after reloading the page, the arrows still do not appear. So that is not the cause.
I downloaded a template for owl.carousel.min.js - I have no idea how to add autoplay and arrows.
It's on a test server on http://testing.r2group.co.za/Test/index.html about halfway down. I would appreciate ANY help, as I'm proficient with HTML, but the JS is beyond me. (why I downloaded a template)
Have you found documentation for how to use the carousel? That is a good place to start.
The owl is part of a theme I am using. Looks like this javascript is included after the carousel.
<script>
jQuery(function($){
$("#latest_news .owl-carousel").owlCarousel({
lazyLoad: true,
responsiveRefreshRate: 50,
slideSpeed: 500,
paginationSpeed: 500,
scrollPerPage: true,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: true,
navigation: false,
autoPlay: true,
singleItem: true
});
});
</script>
This tells the browser to start a new script with jQuery.
jQuery(function($){
//code
});
Inside this function is specific to Owl Carousel.
$("latest_news .owl-carousel") selects the proper element. This is where you will use your own CSS selectors to get your slider.
It is being passed a javascript object of parameters for the slider. For your autoplay, you can give it
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true
});
The arrows are also described by a setting in this object. Looks like the left/right arrows can be added like this:
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
So, at a minimum to get your arrows and autoplay, your script should look like this:
<script>
jQuery(function($){
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true,
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
});
</script>
It would be worth looking at which other settings you can change for greater customization. The slideSpeed and rewindSpeed, for example, could be a good place to get familiar playing with javascript.
I am using slick plugin and I have problem with centering items when there is only one element. My code:
$('#divId').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
If I have few elements in the container everything is OK (centerMode works great) but when I have only one element in slick queue - it goes to the right hand side.
Real example
I couldn't reproduce that problem on jsfiddle. I coppied my code there but everything seems to be ok there: jfFiddle
Does anybody know where is the problem ?
Thanks in advance.
I have 4 tabs, each containing a carousel. The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.
Here is an example with bootstrap 3 tabs and 'slick' plugin for the carousel: http://www.example.design-way.ro/
I tried multiple tabbing scripts and it's the same problem no matter what I use.
The carousel works fine in the second tab if you try to move it a bit..then it somehow activates.
Is this a plugin initialization problem? Here's how I do it:
$('.carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true
});
Please give me some solution or idea to get this carousel working properly. I tried tweaking the css but I got no result.
I have meet this issue When have 3 tabs, each containing a carousel.
PROBLEM:
The problem is that only the carousel in the first tab works fine.
If you activate the second tabs, the carousel divs are all collapsed.
SOLUTION:
After mail to auther of script for help. We have the resolve:
Moved all CSS files first, followed by all js files
Started javascript of Carousel first and Tabs next
For my sample has used script from:
+ TABs script: Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent
demo: http://www.racotecnic.com/tutorials/tabbedcontent/demo.html
download: http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1
+ Carousel script: als.musings.it
I'm not familiar with the tabs plugin you used, but you should enable carousel only on active (and visible) tabs only (you should have a callback for tab switching)
I also faced the same problem. The best ever solution I have found in this: http://jsfiddle.net/phpdeveloperrahul/bejFM/
Not only that. bxSlider offers a lot of options those are easy to understand and use. Some of the options I am mentioning in the following section:
mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,
Hope this will fulfill your need.