I am trying to make owl carousel slider full screen for my site.
This is what I need, feel free to resize Your browser
And this is what I have,
fiddle
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
is there any solution to fix it?
Thx
When using % for heights, you have to work your way down the DOM chain to your child element for the height to apply.
Another option is to take advantage of vh units. 100vh = 100% of the window height.
Just add 100vh to .owl-item and your div item.
.owl-item, .item {
height: 100vh;
}
A vh unit is defined as:
Equal to 1% of the height of the viewport's initial containing block.
Try this:
html, body {
height: 100%;
margin: 0;
}
.owl-wrapper-outer {
height: 100% !important;
}
.owl-wrapper {
height: 100%;
}
.owl-item {
height: 100%;
}
.b-Amarelo {
height: 100%;
}
.owl-item h1 {
margin: 0;
}
Demo: Fiddle
Related
How can I get my Avada (or Custom Wordpress Theme) scroll 100% height divs to go full height of the browser when I have to scroll down or up?
Thank you in advance
Live example
You have two options:
1º - With CSS, using Viewport Units (vw,vh)
section {
width: 100vw;
height: 100vh;
}
section.one {
background: red;
}
section.two {
background: grey;
}
section.three {
background: blue;
}
DEMO
2º - With JQuery using fullpage.js script
DEMO
I try to make a bigger photo than the div that is containing it to auto scroll vertically.
Also found a nice jQuery plugin jQuery simplyScroll but i can't make it run properly.
Here is my fiddle.
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll({
customClass: 'vert',
orientation: 'vertical',
auto: true,
manualMode: 'end',
frameRate: 8,
speed: 5
});
});
})(jQuery);
It doesn't scroll to bottom. What i did wrong?
https://jsfiddle.net/h5Lrq9zy/2/
.vert .simply-scroll-clip {
width: 400px;
}
.vert .simply-scroll-list li {
width: auto;
height: auto;
}
Too much hardcoded stuff within the plugin itself. A terrible plugin overall, but yes, you could modified it to be better.
You specified a custom class to use as a container called vert.
So you need to specify CSS for that class like so:
.vert {
width: 400px; /* wider than clip for custom button pos. */
height: 1000px;
margin-bottom: 1.5em;
}
/* Clip DIV */
.vert .simply-scroll-clip {
width: 400px;
height: 1000px;
}
/* Explicitly set height/width of each list item */
.vert .simply-scroll-list li {
width: 400px;
height: 1000px;
}
Fiddle here.
I'm using ion-slide-box, but the issue is, my ion-slides are not in the same height, So it sets all the ion-slides to the size of heights one. Following is an example
ion-slide 1 height 30px
ion-slide 2 height 100px
So, ion-slide-box height will be 100px, which make a blank space (70px) in the slide1. And when the user slide by using that blank space (70px), slider doesn't work.
What could be the way/workaround to have the slidebox work for different slide heights?
You can use this :
.slider-slides{
display: flex;
flex-direction: row;
}
If you want a fixed height slider with every slides filling the slider height without leaving any blank space,
In style.css add these lines:
.slider {
height: 200px; /* slider height you want */
}
.slider-slide {
color: #000;
background-color: #fff;
height: 100%;
}
$ionicScrollDelegate.resize(); did the trick
check this for codepen
You can use flex-box to organize the slides height:
.slider-slides {
display: flex;
}
Don't forget to reset slides height and all slides will get the biggest height :)
.slider-slide {
height: auto;
}
strong text
if you are using ionic 2
than
add a scss.
.slide-zoom {
height: 100%;
}
and import this class in
<ion-content class=slide-zoom>
<ion-slides>
<ion-slide>
..............
</ion-slide>
<ion-slide>
..............
</ion-slide>
</ion-slides>
</ion-content>
for a more eye-caching design:
set the height of parent box to your desired height (exmp 300px)
set the img overflow and min height to cover all height for images shorter than 300px:
.box img{
overflow: hidden;
min-height: 300px;
}
.slider-slides{
height:300px;
}
<ion-slides [ngStyle]="{ 'height': slidesMoving ? 'auto' : (slidesHeight + 'px') }"
(ionSlideDidChange)="slideDidChange()"
(ionSlideWillChange)="slideWillChange()">
</ion-slides>
// index.ts
slideDidChange () {
setTimeout( () => { this.updateSliderHeight(); }, 200);
}
slideWillChange () {
this.slidesMoving = true;
}
updateSliderHeight(){
this.slidesMoving = false;
let slideIndex : number = this.SwipedTabsSlider.getActiveIndex();
let currentSlide : Element = this.SwipedTabsSlider._slides[slideIndex];
this.slidesHeight = currentSlide.clientHeight;
console.log('index slide',slideIndex )
console.log('current slide',currentSlide )
console.log('height of slide', this.slidesHeight);
}
// Timeout for dynamically load data. if your content static skip timeout
I made a custom slide-transition with jquery cycle plugin which make the use of options: cssBefore, animIn, animOut necessary.
There are two slideshows with different widths side by side on desktopview with a fixed width.
There is a media query breakpoint, where the shows get one below the other and are supposed to get a width of 100%, which works fine so far, except one thing:
Because the cycle option accepting number values (for px) only, the transition don't adapts to the width of 100%.
Question is:
How can I make it so, that relative values are accepted?
And if this is not possible, is there another slider which offers the same transition as shown in the following example?
My Code:
HTML:
<div id="all">
<div id="s1" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" />
<img src="http://malsup.github.com/images/beach2.jpg" />
</div>
<div id="s2" class="pics">
<img src="http://malsup.github.com/images/beach3.jpg" />
<img src="http://malsup.github.com/images/beach1.jpg" />
</div>
</div>
Javascript:
$(function() {
$('#s1').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: -300, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: -300 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
$('#s2').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 700, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: 700 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
});
CSS:
#all {width: 1000px;}
#s1 {width: 30%;}
#s2 {width: 70%;}
.pics {
float: left;
overflow: hidden;
height: 250px;
}
img {
display: block;
height: 250px;
width: 100%;
}
#media (max-width: 600px) {
#s1, #s2 {
float: none;
width:100%;
}
}
See the example on jsfiddle
I am not sure if there is any plugin BUT you can use Media Queries for example:
#media (max-width: 600px) {
#s2 {
width:300px;
font-size:14px;
}
}
this css will be executed when the screen size is less than or equal to 600px ONLY. and if the screen size is more than 600px your main css will be executed.
For full documentation about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
media query demo: http://www.webdesignerwall.com/demo/media-queries/
I hope this helps.
Does anyone know how I can open a resizable fancyBox with a certain aspect ratio (for example 16:9)?
There isn't a native way of easily resizing Fancybox. You can do some simple math with screen.height to open a Fancybox in a particular aspect ratio relative to the current screen resolution.
var height = screen.height/4;
$("#test").fancybox({
'width' : 16/9. * height,
'height' : height,
'autoDimensions' : false
});
});
There's a pure CSS solution too. It works even when you resize.
.fancybox-type-iframe .fancybox-inner{
padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
height: 0 !important;
}
.fancybox-type-iframe .fancybox-inner .fancybox-iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I'm assuming you needed this for a video displayed with fancybox. Hence the iframe-related css.
P.S. I know this thread is old. But maybe someone still needs a solution.
Here's a pure css solution for responsive youtube popups that works with Fancybox 3. It's written in scss for clearness but can be converted to css online if you're not familiar with scss.
.fancybox-slide--iframe {
.fancybox-content{
margin: 0!important;
max-width: 100%;
width: 100%;
padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
height: 0 !important;
/* don't go full width on wide screens */
#media all and (min-width: 800px) {
max-width: 70%;
width: 70%;
padding-top: 39.34%; /* (9/16 * 70%) -- smaller aspect ratio in percents */
}
.fancybox-iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
AFAIK, Fancybox right now, does not support this. However, You can control the dimension of fancy box size
("#yourbox").fancybox({
'width' : 680,
'height' 495,
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});