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.
|
Is it possible? Or do all elements have to have the same exact height so there isn't issues?
Right now it shows 1 pager bullet, even if just a single slide is present.
Maybe same goes for control buttons
http://i.imgur.com/KIIGamZ.png
How it should work:
Work like a slider as is if more than 1 slides.
If a single slide, let it look like a standalone banner image.
I'm trying to use lightslider loading images with Ajax and JQuery.
Can I do this?
Send a ajax peticion to a php script and load the response (Array of
) in the div to add the images to the slider?
Thanks.
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?
Hi!
When I choose the 'mode: "fade"'-setting, the previous button is not functioning correctly. it points to the very list slide instead of the previous one.
I am trying to add some sort of loader gif for the slider so all the images can load before open. Is ther functionality for this?
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!
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.
![image](https://cloud.githubusercontent.com/assets/8300920/3738666/53cf2464-1743-11e4-8d84-b8e7a720a32c.png)
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!
Hi,
Just to ask, How do we pause the slider when mouse hover current slide?
Is there any tweak to do so?
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
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
Hi, can slider continue play automatically with navigation, after click on pagination and navigation? I couldn't find this option. Thanks!
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??
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.
Hi
Great slider one of the best I've used! However are there any plans to add in image zoom functionality or whether it's possible to integrate with any other image zoom scripts out there? Something like jQuery Zoom.
Thanks
Hi
I am using your wonderfull jquery lightSlider
i am not an expert in coding so i need a help in vertically centering the pictures as the size of the pictures is different. I am talking about the pictures in the list imageGallery
i have tried this HTML structure but it's not working
![content slider](https://cloud.githubusercontent.com/assets/8898570/4388072/2252de60-43e6-11e4-9c3f-d1c4c8ddae9d.jpg)
this is from your website, and my page looks like this:
![content slider page](https://cloud.githubusercontent.com/assets/8898570/4388074/2c805728-43e6-11e4-845d-d25e9b2d96ce.jpg)
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="#"
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!
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!
Hello,
The plugin extremely useful but i think javascript:void(0) on pager method is bad practice because it will have access to ping these url.
Thanks
Hi,
Thanks for amazing script, i really appreciate it.
I've been implementing a dynamic slider, all the < li > items will be created by PHP.
I put the next and prev slider button into the main < ul > based on your public method example on the website, the buttons works fine in the first slider, but those are not working after the first click. I believe there should be a fix for that. My knowledge in jQuery is so limited.
PS: when i put them back from the < ul > those are working fine.
Could you please help me out with?
Thanks,
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.
Hello, it is possible to integrate full preview after image click with magnific popup?
Hi,
first of all: GREAT Slider!!! Thanks a lot.
I just noticed one bug:
I tried to initialize two sliders on the same page with two different sliding modes.
First slider:
jQuery('.category-slider').lightSlider({
minSlide:1,
maxSlide:3,
slideMove:1,
slideMargin:5,
mode: 'slide'
});
Second slider:
jQuery(document).ready(function() {
jQuery('.lightSlider').lightSlider({
minSlide:1,
maxSlide:1,
mode:'fade'
});
});
Unfortunately the first slider was rendered in fade mode as well, so that only one item was visible.
Cheers, Sebastian
Hi,
No matter what I do, I can't get the slider gallery working like it shows in the examples on the website. I get a frustrating bullet point & the images aren't responsive the same way they are on the website. First I thought that css styles may have been conflicting between the existing stylesheets of the site I was trying to integrate in to but now I have repeated everything on a jsfiddle & the same thing persists.
I'd appreciate any help because if I can get it working as advertised... it'd be perfect for my needs.
http://jsfiddle.net/f7L7hwkq/
Thanks
as you know your plugin uses float method to keep the slides alinged, and when the slider is initialized, you are able to give width to the parent container via javascript.
BUT... until the slider is loaded, the slides are stacked one below the other, as like normal elements, blocking space, and once the slider is init-ed, they suddenly go up and form a slider stacking one beside each other.
This wouldn't be noticed if its a single slider on page, but if thee's other content (big page) along with the slider, or consider a slow connection, the slider wouldn't be loaded the moment you enter the page. hence, the awkward rendering or movement, whatever you call, appears.
solutions:
- for sliders I prefer to use absolute, so your slider looks as is before and after slider is loaded because of CSS, blocking same position before and after.
- giving fixed height to the slider and overflowing none, is a way - but we talk responsive here, so isn't a good idea.
What do you think?
In the move function, this line failed for me in Safari:
ob.css('transform', 'translate3d(-' + v + 'px, 0px, 0px)');
I had to do a test for webkit browsers and use this instead when found:
ob.css('-webkit-transform', 'translate3d(-' + v + 'px, 0px, 0px)');
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
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.
Any idea how to make random order in displaying slides ?
I'm trying this configuration for slider on demo page
gallery:true,
item:1,
vertical:true,
verticalHeight:295,
vThumbWidth:50,
thumbItem:3,
pager:true,
thumbMargin:4,
slideMargin:0,
currentPagerPosition:'left'
but thumbs not move to left side of vertical slider.. Maybe I do something wrong or I don't understand this option right?
Greetings.
This is amazing and simple plugin need a vertical scrolling option.
By default I see LightSlider didn't react if I try drag and move by mouse? It is possible?
i want to use some other images to replace the default ones.
Trying this out tonight as it seems like a perfect fit for what I need. Having an issue with responsive images though. The active image shows perfectly fine and is responsive as expected, however, this is only true when using the 'slide' mode... fade causes issues. I've fiddled with it a bit, but can't seem to come up with a fix although I see the relative and absolute positioning is the problem.
This also causes issues with the gallery positioning and currentPagerPosition because I do not have a value to set for slideWidth.
Perhaps a response update? I would also like to request a wrapper for the active slide as well. For instance, I want to have a border and padding around my active image in this example. I can sort of do this by applying styles to csSlideWrapper, however, it is not a perfect result as the image is not contained within the wrapper per se. On sliding it will run over the border and padding styles.
This example uses normal bootstrap 3 css...
<div class="row">
<div class="col-md-12">
<ul id="lightSlider" class="gallery list-unstyled cS-hidden clearfix">
<li data-thumb="/user-data/2/screenshots/demo21.jpg">
<img class="img-responsive" src="/user-data/2/screenshots/demo21.jpg" />
</li>
<li data-thumb="/user-data/2/screenshots/demo22.jpg">
<img class="img-responsive" src="/user-data/2/screenshots/demo22.jpg" />
</li>
<li data-thumb="/user-data/2/screenshots/demo23.jpg">
<img class="img-responsive" src="/user-data/2/screenshots/demo23.jpg" />
</li>
<li data-thumb="/user-data/2/screenshots/demo24.jpg">
<img class="img-responsive" src="/user-data/2/screenshots/demo24.jpg" />
</li>
<li data-thumb="/user-data/2/screenshots/demo25.jpg">
<img class="img-responsive" src="/user-data/2/screenshots/demo25.jpg" />
</li>
<li data-thumb="/user-data/2/screenshots/demo26.jpg">
<img class="img-responsive" src="/user-data/2/screenshots/demo26.jpg" />
</li>
</ul>
</div>
</div>
Is there an option to for the images to have varied width and a set height?
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;
}
![issue](https://cloud.githubusercontent.com/assets/8511457/3993840/0f5816d4-2912-11e4-9e3a-56eee86b632a.PNG)
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.
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.
I wish to donate, but I didn't see any donation link. Did I miss it?
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.
-