-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slider Height not flexible #48
Comments
i have the same issue!,
|
Please understand that according to simple CSS rules element with height:100% will fit to parent's element height. If swiper wrapped with another element then it will not work. So if swiper is a child of BODY, then this will enough: html, body, .swiper-container { height:100%; position:relative; } Otherwise yes, it is better to use with script like in example of Wu4m4n, but i would recommend to enhance it with: /* FULLSCREEN SWIPER*/ $(window).resize(function(){ var height = $(window).height(); var width = $(window).width(); $('.swiper-container, .swiper-slide').height(height); $('.swiper-container, .swiper-slide').width(width); //Add reInit, because jQuery's resize event handler may occur earlier than Swiper's one swiper.reInit() }) $(window).resize(); |
good point! On one screen you have a form, on another screen have a add, etc.. For example I have an examiner with datatables 1.9.4. (and cakephp 1.3) Only a vision. Greetings!. |
Thanks Wu4m4n, nolimits4web The fullscreen approach is great but not really where I was going. What I'm interested in is how to achieve a flexible height in a dynamic container. At the moment, if I don't specify a CSS height, Swiper calculates a height of all slides stacked. If I set the mode to 'horizontal', I would expect the Swiper height to be that of the tallest slide....not stacked... Is there a way to get the height of the active slide and then set that as the Swiper height? My thinking is to get the height of the initial slide, set that to the Swiper height. Then By the way, really cool work on this plugin |
@NeoMudaly. I suppose you are trying to make it like pages that may have different height and to be able to let user scroll it, right?)) There is a solution for you: //First of all unset slide's height: $('.swiper-slide').css({height:''auto}) //Height of new active slide: var newHeight = $(mySwiper.currentSlide()).height() //Set new Height to slides and slider: $('.swiper-container, .swiper-slide').css({ height : newHeight }) //And call reInit: mySwiper.reInit() About fullscreen option. I'm working on ready to use robust fullscreen Swiper app that will match your needs, hopefully it will be released soon |
About the swiper app you're working on, will it have internal scrolling of the pages? I might misunderstand your tip above but it looks like you're setting the size of the whole container to the size of the current page. That means that when you scroll down a page and then swipe to another page, that other page will be scrolled down as well, which is weird. I have tried to build a similar thing with swiper where you scroll sideways between pages, with each page having a vertical swiper in freeMode. It is hard to get the vertical scroller to work ok though, as you need to allow the content of the page to render to its full height. Most examples on the demo page use fixed widths. You say swiper supports responsive design but there are few examples. Btw, I'd like the pages to be able to internally have inline image galleries using swiper. Haven't tried nested swipers with swiping in the same direction yet but I suppose it should be supported. Anyway, looking forward to see the fullscreen app. Thanks for a great lib. |
@andersroxenhag Yes, when using method above then pages will "jump" after swiping between them, and this is not a best way. |
Sounds great, I'll try out the scrollContainer property. Think I used that before but missed it in my latest attempt. Thanks. |
Hi, EDIT: |
@nolimits4web I have it working now with the code you suggested. Awesome, and great work on this!! |
reference to : nolimits4web/swiper#48 nolimits4web commented on Jan 28, 2013
Fixed my problem using the following in "onSlideChangeStart" onSlideChangeStart: (swiper)->
$(swiper.slides).each ->
$(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto' Setting the "hidden" slides |
Its really nice slider. I am using this slider.
Please suggest something. Thanks |
Fixed my problem. // Working Code
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
setSwiperHeight();
}
}) // Not Working Code
$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
setSwiperHeight();
}
})
}) |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I have
Following setup for the responsive Swiper, the height no longer works.
If I set height to 100%, then I get whitespace caused by the slides stacking.
Height:auto , same result. It seems that a pixel value is always set, locking the height.
Am I missing an option or css that allows the height to flex?
The text was updated successfully, but these errors were encountered: