Comments (23)
Hi,
I think what you're asking is "can I make the slider responsive"? If so then this is on the roadmap but it is difficult given the nature of some of the effects/transitions.
I'll keep you posted on my progress on this issue
Thanks
Joe
from flux-slider.
Thanks a lot, i know it would be hard to obtain.
So, i'm wondering if it would be simple in case of the slide transition...
How can i change the slider size with greater images ? Only the initial size, not a responsive behavior... I've seen in the 1.4 version the "width" and "height" options but i didn't managed to make them work..
from flux-slider.
The width
and height
properties are a bit experimental at the moment (they don't work well with the circular transitions).
Its probably worth clearing up what they do and don't do at the moment. They do affect the size of the slider thats produced but they dont cause the images to be resized, just cropped.
Here's an example: http://jsfiddle.net/7kgXw/
As you can see the images are cropped from the top left. If you need to resize the images to a certain size then you'll need to do that with some server side code. By default (when no height
/width
is provided) Flux will do its best to work out the correct size to create the slider, but it doesn't work well with images that are not the same size.
Hope that helps?
from flux-slider.
yes, it helped a lot :) now my slider is resized to fill the right space in the window.. to achieve this behavior i wrote those lines.. is there a better way to do this ? :)
$().ready(function(){
window.myFlux = new flux.slider('#slider', {
autoplay: true,
pagination: false,
transitions: ['slide'],
width:600,//$(window).width(),
height:400//$(window).height()
});
resizeSlider();
});
$(window).resize(resizeSlider);
function resizeSlider() {
var altezzaDiv = $(window).height() - $('header').height() -
$('footer').height()-$('body').css('margin-top').substring(0,2) - 2; //this will be the right height for the slider
$('#slider').height(altezzaDiv);
$('.fluxslider').height(altezzaDiv).width($(window).width());
$('.images').height(altezzaDiv).width($(window).width());
$('.image1').height(altezzaDiv).width($(window).width());
$('.image2').height(altezzaDiv).width($(window).width());
}
now, the only missing thing is the auto-resize of the images.. at the moment (like you said) the are simply cropped
from flux-slider.
ok.. i wrote some additional code, making use of the css3 "background-size" property
function resizeImages() {
var height = $(window).height() - $('header').height() -
$('footer').height()-$('body').css('margin-top').substring(0,2) - 2; //the right height that my slider should have
var width = $(window).width();
var percWidth = width/1600; //the images i used are 1600*1200
var percHeight = height/1200;
var perc=percHeight;
if (percWidth>percHeight)
perc = percWidth;
$('.image1').css('background-size', 1600*perc+'px '+1200*perc+'px');
$('.image2').css('background-size', 1600*perc+'px '+1200*perc+'px');
}
now the images are resized, although the animation is a little "jerky" and slow.
There is a last (for the moment :) ) issue.. when a new animation starts, the divs just created don't have their background image resized.. how can i apply the resizing code i wrote at the begin of a new animation ?
Thanks in advance, really.
from flux-slider.
Hi, unfortunately it isn't as easy as just using background-size
as what Flux does is slice up the images and create separate divs
for each block/slice.
I also don't think you can just arbitrarily resize the images in each slice as the offsets would all be wrong so the slices wouldn't tile correctly.
To use background-image
I think Flux would need to have quite a bit of its core code re-written
from flux-slider.
understood.. i've searched another (simpler) plug-in to obtain this effect, although this slider is really cool.. keep following your work !! thanks for the help :)
from flux-slider.
Some progress has been made on making Flux responsive. Once it's more stable I'll push out a beta.
Will keep you posted on progress with this issue
from flux-slider.
Thanks for the effort.. I think it would be a big improvement for this project .. Keep me updated !
from flux-slider.
Has there been any progress on this issue?
from flux-slider.
Auto resize of images is low priority at the moment given the related technical issues. If you use WordPress then you can use the Flux Slider WordPress plugin which does auto server side image resizing for you.
Making the slider responsive is still a priority but its hard to make it backwards compatible with other browsers, hence the delay.
from flux-slider.
Yeah I fully understand. I just saw this on a google search and the last update was 5 months ago. Doing something server side is a GREAT idea. I may just have to make that happen to fix my resize issue.
from flux-slider.
any updates on a responsive slider for mobile? we are using drupal - lcan the wp code be ported to drupal easily?
also, on mobile even though the images are all same size, even tried with not specifying size for the slider ...the images keep stretching past the right of the screen on a 1 column layout. on a 2 column sideways layout the images appear correctly on mobile. any ideas how to make the prior work? love the slider effects :)
from flux-slider.
+1 For responsive! :) I hope to see some progress soon so I can use it on my WP site.
from flux-slider.
💯 x pretty please with strawberries on top for responsive :)
from flux-slider.
+1 for responsive
from flux-slider.
For me it would be great if there is a possibility to deactivate the gallery for devices with smaller displays. I mean, if the window.width is smaller than the slider.width all pictures have to be listed below each other and scale to the container.width.
from flux-slider.
+1 for responsive
from flux-slider.
Hi, some news on this issue?
i see a video on youtube of the author with this slider responsive but no update there.
+1 for responsive
from flux-slider.
Is this feature coming, I saw the YouTube video.
I need this :)
+1 for responsive
from flux-slider.
Hi Joel, i have been reading the posts, i got an idea for you, what you say it's true, you use many divs to build effects , but, you can evaluate first width and height image to calculate aspectratio, and then , use those values to create transitions,.. for example, var winWw = window.innerWidth; imgHh = img.heightProperty, then calculate... aspect ratio, new width of image will be the winWw, and new height will be the ratio result, based on this, you can make div transitions, or well, i can see it like that, i dont know how much usefull could it be!!... and use Temp IMG, dont use back-img, using two img with position:absolute , or divs with position absolute you can create transitions adjusting image to new sizes!!! peace! ;)
from flux-slider.
Hi Joel,
Thank you for this great work! Is the flux responsive now? I am planning to use it. But, my case is that I will put slide in a resizable div. I tried. It looks like it can not be resized when the container div is resized.
thanks and regards,
Yiyu
from flux-slider.
if someone is still trying to get this responsive, i did it this way:
var maxWidth = 1920;
var maxHeight = 600;
var ratio = maxWidth/maxHeight;
var sliderid = "#some_id";
$(document).ready(function() {
$(sliderid).hide();
var sliderWidth = $(window).width() < maxWidth ? $(window).width() : maxWidth;
var sliderHeight = sliderWidth/ratio;
window.fluxslider = new flux.slider(
sliderid,
{
'width': sliderWidth,
'height': sliderHeight
});
responsiveSize();
$(sliderid).show();
});
$(window).resize(function(){
responsiveSize();
});
function responsiveSize() {
var sliderWidth = $(window).width() < maxWidth ? $(window).width() : maxWidth;
var sliderHeight = sliderWidth/ratio;
$(sliderid+' div').css({
'width': sliderWidth,
'height': sliderHeight
});
}
and in css i added this:
.images div {
background-size: cover !important;
background-repeat: none !important;
}
from flux-slider.
Related Issues (20)
- Flash of next image during transition to previous HOT 4
- CSS3D transforms not recognized in IE10 HOT 6
- pagination
- Choose Only One Transition HOT 3
- Concentric and Warp cause image's position shift before transition. HOT 1
- random images and external data file
- Possible memory leak on Safari HOT 3
- about making the slider responsive? HOT 2
- Can't get transitions to work? HOT 2
- Doesn`t work in IE HOT 2
- onTransitionStart event HOT 3
- using images of size 1024x350
- Help, please
- RTL support
- Pause on hover
- Disable lazy loading
- Missing image files in img folder
- Unable to open link in new tab
- On the question of response?
- how to use it in webpack with import statement?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flux-slider.