I'm using slick carousel to try and display a bunch of images (http://kenwheeler.github.io/slick/). The library works very well, but all examples have all the slides baked right into the dom. This approach doesn't work very well for me because I want to be able to scroll through many, many images and adding them all to the dom isn't possible (or performant).
Two approaches look like they might work:
1) Have a fixed number of slides, say 3, and use the onAfterScroll callback to cycle my photo s through my 3 elements and use slickGoTo to move the slick index. This approach seems to work but I'm getting some weird rendering artifacts when i use slickGoTo
2) Use slickAdd and slickRemove to append and prepend elements to the dom as I scroll. Unfortunately, prepending elements seems to change the current slide property in slick which screws everything up. This approach seems like it has the most potential, if it only worked.
Has anyone tried either of these approaches and had any success?
Thanks!
Just as user2943490 mentioned:
$(document).ready(function(){
$('.slick-slider').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1
});
});
You’ll see the first three images. Image number four won’t be loaded until you navigate to the next slide.
Related
I am currently using responsiveSlides
as an image slider on our web page.
It is a jQuery slider using an HTML unsorted list of images to slide through (automatically in my case).
Now the Issue i am having is, that before the slider actually starts (meaning the script is loaded) there is the last picture in the unsorted list displayed, for a short moment. Then the slider starts his work with the first image in that list.
I tried using a minified version of the js-file, and load that script at the very beginning of my HTML markup. This actually shortened the display time of the last picture, but it is still noticeable and annoying. (This happens with every click on a navigation point, as the page is loading new...)
Also i experimented with timeout function (js) to display the unsorted list containing div after some miliseconds, or on document.ready state, etc..
But all of theses attempts where ugly.
So now i am at the point, where i try to understand how the whole slider script is working, and i assume there must be a point, where i can set to start with the last picture in my unsorted list, instead of starting with the first one, but i just can't find that point in the code.
I couldn't manage to post the code here with proper syntax highlighting, so you can find the code here
Any ideas are much appreciated!
As I see on their demo page, sliding happens because of changing z-index, so slides like a pie.
In you slider you may see the last slide while script is initializing because of already applied CSS, but not JS yet.
I'd suggest to add opacity: 0; in CSS to all your slides. When JS will be ready, it'll add opacity: 1; itself.
I almost have no experience with JAVASCRIPT, so I've searched a lot for a carousel with right & left arrows & lightbox (fancybox). & finally I found it ... but when I click left or right arrow , the all images row slide left or right. I need it to slide normally one image by one. How can I modify that, please ?
Here is an image describe how the carousel look
I already done with copying the carousel to my website, but the only issue is that the all images row slide left & right ... so when the user click left, the current four images got replaced with the next four images.
it's hard to write all needed codes here, I think the others Javascript files make effect on the final result. So, I attached all the needed files.Website's Files
First, I recommend you practice implementing the carousel following this instruction (be sure that you incorporate Bootstrap 4 accordingly).
https://v4-alpha.getbootstrap.com/components/carousel/#with-controls
My experience with carousel is that you would have to nest <div> deep in each image to control their placement and sliding. I had to create container per image for my carousel, so that was at least three levels deep. If you only use images alone per slide, you may be able to just use div containers alone.
Now, if you are using LightBox framework as well, then there are likely to be conflicting javascript functions. My suggestion is that if you really want the carousel, to just use images alone, and then style it accordingly by CSS scripts and not use the Lightbox. Otherwise, it is going deep in javascript and make custom adjustments.
https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
se angle brackets to force linking: Have you seen https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
enter code here
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I hope I'm not violating any written or unwritten rules by asking for help on my business' site.
http://www.gnarlyweb.com/wrladv/
So I'm using Flexslider (but have tried at least 3 others) to handle showing multiple pieces of work on portfolio items. If you scroll to the Portfolio section, each item is clickable, and a flexslider appears. The Flexslider js is obviously working because the nav shows up, the images will animate if I have slideshow: true, but the arrows on the side do not make it move to the next piece.
I've been working on this for weeks now and can't figure it out. Does anyone know why only half of the Flexslider library works in this situation?
I know it's not Flexslider's fault, because I can put together a jsfiddle with the sources from the portfolio area and have it work perfectly.
I see all your images are in one flexslider container and they are dynamic.
I think this may cause this problem.
But i'm not pretty sure.
My suggestion is: different flexsliders for different images
You're not giving anything for the flexslider script to reference in your html. Looks like your basic html setup for your flexslider is:
<div class="portfolio-slides">
<ul class="slides">
<li><li>
</ul>
</div>
By default, the flexslider script searches for the flexslider class. You can either go into your flexslider script and add,
$(document).ready()
$(window).load(function() {
$('.portfolio-slides').flexslider({
});
});
or change your div class name to flexslider. The issue you're going to run into is that you have multiple flexsliders so you're going to have to create unique tags and have jquery call on each one otherwise all the flexsliders sync up.
I am using malsup's cycle2 carousel plugin for displaying configurable slideshows containing multiple elements per slide (using carousel-visible option). I would like to be able to use other transition effects than the default one, like fade out for example.
Specifying "fadeout" fx instead of "carousel" works but then the carousel-visible option no longer works and the number of elements per slide is always equal to 1.
Has anybody had this problem before?
In advance thank you!