When in table slider ignores maxSlide and displays all
Here is the code:
<script src="../../js/jquery-1.11.0.js"></script>
<script src="js/jquery.lightSlider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#lightSlider').lightSlider({
minSlide:1,
maxSlide:4,
slideMargin:10,
slideWidth:100
});
});
-
First Slide
Lorem ipsum Cupidatat quis pariatur anim.
-
Second Slide
Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.
-
Third Slide
Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.
-
Forth Slide
Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.
-
Fifth Slide
Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.
-
Sixth Slide
Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.
|
Hey,
first of all, great work with the slider, for me it's the best. But i have one question, as i'm only a beginner at javascript. In this case i use the slider for a gallery where logos from certain companys are looping, when they are finished, it scrolls back and starts from the beginning. Is it possible that insted of scroling to the first slide, the first slide slides in, like it would be the next? Like a carousel.
Here are the setting i use. I hope someone can help me out with this.
minSlide: 1,
maxSlide: 6,
proportion:'',
mode: "slide",
useCSS: true,
speed: 1500, //ms'
easing: '', //'ex cubic-bezier(0.25, 0, 0.25, 1)',//
auto: true,
pause: 3000,
loop: true,
controls: false,
prevHtml: '',
nextHtml: '',
keyPress: true,
pager: false,
gallery: false,
Best greetings from Germany.
Nico
Problem: When clicking on an image wrapped by an "a" tag the page jumps to top.
Solution: use <a href="javascript:void()" instead of <a href="#"
Greetings.
This is amazing and simple plugin need a vertical scrolling option.
Is it possible? Or do all elements have to have the same exact height so there isn't issues?
I'm using lightSlider lasted version. Vertical slide is working great but when I set mode to 'fade' the slide turn to horizontal. When it turned to horizontal one thumbnail is missing.
Is it possible to display thumbnail navigation without having a carousel attached to it? That's the only thing I need before I start using this thing religiously ;)
Thanks!
i want to use some other images to replace the default ones.
When I add the code for lightslider inside a table, the slider seems to work as intended, however its width is calculated as the width of the sum of the widths of unordered list panels so that they are all visible at the same time. They slide left to their exact position, but they are all visible.
I have tried using your demo code in the table with the same results. Could it be that I have a setting incorrect causing it to not hide the section to the right of the first unordered list panel?
Thanks!
Hello,
First off...this is a GREAT plugin. Thanks for posting. I've been looking for a simple image/content type slider, and this seems to be what I've been in search of. I have a quick question re: some spacing I'm noticing when setting up.
I basically am trying to setup a simple 100% width slider, showing 1 image/slide at a time. I'm able to do that, but for whatever reason, there is a gap to the right of the slides when page is "first loaded". But... once page/slider is resized, the gap goes away/looks great. I tried adding CSS for the UL/LI to make sure all padding/margin is gone, but I'm not able fix.
Here's an example, with a basic slider, and color BG for each LI to show what I'm referencing:
http://jsfiddle.net/VanHammersley/c5ypLps5/19/
Any help would be appreciated!
Hi Sachin,
I was trying your carousel, and i had faced a issue in 'onSliderLoad' callback.
As in Documention : onSliderLoad: function (el) {}
contains el object which hold the multiple properties, like play() , pause() ,getCurrentSlideCount().
But am not able to invoke any property.
Could you help me with this??
I think this has been addressed with the fix for #50 but with the way the code was written prior to that the library continues to resize elements and do things after that method is called.
The convention I believe is
ready
= all elements are loaded into the page but other things aren't necessarily finished yet
load
= we are trying to guarantee our function/library/whatnot has completed doing all the stuff we wanted to do.
Any idea how to make random order in displaying slides ?
Hey,
Great slider, nice and neat.
Got one question: How would you go about supplying different slider options and re-drawing it on certain breakpoints on window resize?
First, Thanks for the good work!
As in the title, i met this problem when i have multi slider instance on single page,
I have forked one of code at: http://jsfiddle.net/3f8x465e/ to demo this.
Now I can only comments the hide() line, to show the control which might have more than one children.
if($children.length<=1){
$('.csAction').hide();
}
Any idea how to make control work different for different slider? Thanks!
Have you noticed that when .csPrev or .csNext are clicked on touch devices (iPhone and iPad tested), the slider moves two slides over?
Any idea on how to fix that? Customizing the slideMove won't do, since it can't go below 1.
By default I see LightSlider didn't react if I try drag and move by mouse? It is possible?
Hi,
Just to ask, How do we pause the slider when mouse hover current slide?
Is there any tweak to do so?
Is it possible to have the thumbnails cut off at end points as opposed to showing half a thumbnail if the container bounds are smaller than the given thumbnails?
I forgot to add, that this is when setting a thumbnail width specifically within the options.
At the moment if I have a container of 400px, and 4 thumbnails set to 100px each with a margin of 10px, I essentially get 3 and a half thumbnails in view.
It would be better if it only showed 3, possibly offering the option to centralise them or float to the left.
first of all thank you for your amazing work!
I was wondering that is it possible for you to fix lightslider for RLT version?
because it has lots of problem in RTL websites
thank you
I wish to donate, but I didn't see any donation link. Did I miss it?
Perhaps not really an issue but more of a request...
The fade function right now fades in a slide while the previous one is directly hidden, resulting in a bit of a 'shocky' effect. I guess it would be better if the next slide is fading in on top of the other slide. Afterwards the previous slide can be hidden.
Is this possible right now?
Thanks!
Me again :-), I have placed fewer gallery images and used the fade effect and test it on IE9, the gallery pager moves far away to the right and disappears.
Hi, can slider continue play automatically with navigation, after click on pagination and navigation? I couldn't find this option. Thanks!
How to add a class of active slide (more div what is in it), and delete this class if the slide is not active?
Should be used сallbacks functions only how to get to the active slide can not understand?
Hi,
Thanks for great script.
When I am trying to use fadeIn, fadeOut event on page body and slider mode: 'fade' sometimes picture doesn`t load in full height. Am I doing something wrong ? Code for body fade :
$("body").css("display", "none");
$("body").fadeIn(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
In line 222 ('padding-bottom': ($children.height() * 100) / elSize + '%'
) and 228 calculation is wrong on smaller screens because $children.height()
does not get the correct height of the resized image.
You will see it if you initialize lightslider at $(window).load(function()
.
Initializing at $(document).ready
works most of the time in Firefox and Chrome although the $children.height()
get the wrong value but not in IE11
Recommend Projects
-
-
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
An Open Source Machine Learning Framework for Everyone
-
The Web framework for perfectionists with deadlines.
-
A PHP framework for web artisans
-
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
Some thing interesting about web. New door for the world.
-
A server is a program made to process requests and deliver data to clients.
-
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Some thing interesting about visualization, use data art
-
Some thing interesting about game, make everyone happy.
-
Recommend Org
-
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Open source projects and samples from Microsoft.
-
Google ❤️ Open Source for everyone.
-
Alibaba Open Source for everyone
-
Data-Driven Documents codes.
-
China tencent open source team.
-