手机上猫头鹰旋转木马的高度 - IT屋-程序员软件开发技术分享社区
手机上猫头鹰旋转木马的高度
[英] Height of Owl Carousel on phone
本文介绍了手机上猫头鹰旋转木马的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一张使用 Owl Carousel 覆盖桌面整个屏幕的图像.
当我在手机设备上查看同一张图片时,它只占屏幕尺寸的三分之一.
如何调整高度,使其比手机上的当前高度高?
我已经阅读了一些主题,但我是 Owl carousel 的新手,我不确定我是否做错了什么.我找不到这个类 https://css-tricks.com/论坛/主题/owl-slider-100-height/ 所以不确定
我的 Owl carousel 配置是
项:1,智能速度:1000,自动播放:真实,自动播放超时:6000,点:假,循环:真实,鼠标拖动:假,自动高度:假,触摸拖动:假,自动高度:真
猫头鹰旋转木马 v2.3.4
CSS 使用(https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css )
/*** 猫头鹰旋转木马 v2.3.4* 版权所有 2013-2018 David Deutsch* 获得许可:在 https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 中查看许可*/.owl-旋转木马,.owl-carousel .owl-item {-webkit-tap-highlight-color:透明;位置:相对}.owl-carousel {显示:无;宽度:100%;z-索引:1}.owl-carousel .owl-stage {位置:相对;-ms-touch-action: pan-Y;触摸动作:操纵;-moz-backface-visibility:隐藏}.owl-carousel .owl-stage:after {内容: ".";显示:块;清楚:两者;可见性:隐藏;行高:0;高度:0}.owl-carousel .owl-stage-outer {位置:相对;溢出:隐藏;-webkit-transform: translate3d(0, 0, 0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper {-webkit-backface-visibility:隐藏;-moz-backface-visibility:隐藏;-ms-backface-visibility:隐藏;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0)}.owl-carousel .owl-item {最小高度:100%;向左飘浮;-webkit-backface-visibility:隐藏;-webkit-touch-callout: 无}.owl-carousel .owl-item img {显示:块;宽度:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled {显示:无}.no-js .owl-carousel,.owl-carousel.owl-loaded {显示:块}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev {光标:指针;-webkit-user-select:无;-khtml-user-select: 无;-moz-user-select:无;-ms-user-select:无;用户选择:无}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot {背景:0 0;颜色:继承;边界:无;填充:0!重要;字体:继承}.owl-carousel.owl-loading {不透明度:0;显示:块}.owl-carousel.owl-hidden {不透明度:0}.owl-carousel.owl-refresh .owl-item {可见性:隐藏}.owl-carousel.owl-drag .owl-item {-ms-touch-action: pan-y;触摸动作:泛-y;-webkit-user-select:无;-moz-user-select:无;-ms-user-select:无;用户选择:无}.owl-carousel.owl-grab {光标:移动;光标:抓取}.owl-carousel.owl-rtl {方向:rtl}.owl-carousel.owl-rtl .owl-item {浮动:右}.owl-carousel .animated {动画持续时间:1s;动画填充模式:两者}.owl-carousel .owl-animated-in {z-索引:0}.owl-carousel .owl-animated-out {z-索引:1}.owl-carousel .fadeOut {动画名称:fadeOut}@关键帧淡出{0% {不透明度:1}100% {不透明度:0}}.owl 高度 {过渡:高度 0.5 秒缓入缓出}.owl-carousel .owl-item .owl-lazy {不透明度:0;过渡:不透明度 0.4 秒缓和}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""] {最大高度:0}.owl-carousel .owl-item img.owl-lazy {变换样式:preserve-3d}.owl-carousel .owl-video-wrapper {位置:相对;高度:100%;背景:#000}.owl-carousel .owl-video-play-icon {位置:绝对;高度:80px;宽度:80px;左:50%;顶部:50%;左边距:-40px;边距顶部:-40px;背景: url(owl.video.play.png) 不重复;光标:指针;z-索引:1;-webkit-backface-visibility:隐藏;转换:转换 0.1 秒轻松}.owl-carousel .owl-video-play-icon:hover {-ms-transform: scale(1.3, 1.3);变换:比例(1.3, 1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn {显示:无}.owl-carousel .owl-video-tn {不透明度:0;高度:100%;背景位置:居中;背景重复:不重复;背景大小:包含;过渡:不透明度 0.4 秒缓和}.owl-carousel .owl-video-frame {位置:相对;z-索引:1;高度:100%;宽度:100%}
解决方案
从我收集到的信息来看,您希望容器在桌面和移动设备上使用 Owl Carousel 实现全高和全宽.
我为您制作了一支笔,它可以帮助您使用 Owl Carousel 到达您想去的地方 - 我对此知之甚少,因为我不再倾向于使用 Carousels,但它是一个很好的选择轮播解决方案!
https://codepen.io/kurtis-rogers/full/NozyEz
HTML:
<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Owl Carousel 2 示例</title>头部><身体><div class="owl-carousel"><div class="post-content-parent"><div class="c--post-content-image-wrapper"></div><div class="post-content-text-child"><div class="post-content--inner"><h2>滑块1</h2><p>关于滑块1的一些信息</p>
<input type="button" value="阅读更多">
<div class="post-content-parent"><div class="c--post-content-image-wrapper"></div><div class="post-content-text-child"><div class="post-content--inner"><h2>滑块1</h2><p>关于滑块1的一些信息</p>
<input type="button" value="阅读更多">
</html>
CSS(SCSS):
body, html{填充:0;边距:0;}.owl-carousel, .owl-stage-outer {最大高度:100%;高度:100vh;}//图像和文本的父容器.post-content-parent{显示:弹性;宽度:100%;高度:100vh;位置:相对;}//发布内容图片样式.c--post-content-image-wrapper{位置:绝对;宽度:100%;高度:100vh;顶部:0;底部:0;背景:url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");背景尺寸:封面;背景位置:居中;背景重复:不重复;}//发布文本内容.post-content-text-child{显示:弹性;对齐项目:居中;对齐内容:间隔;背景:rgba(255, 255, 255, 0.7);z-索引:1;填充:20px 0;位置:绝对;底部:0;顶部:自动;左:0;右:0;宽度:100%;高度:自动;.post-content--inner {padding-left: 20px;}h2{字体系列:Arial、sans-serif;字体粗细:更轻;}h2, p {边距:0;}输入[类型=按钮"] {右边距:20px;}}
JavaScript:
$(document).ready(function(){$(".owl-carousel").owlCarousel({循环:真实,项目:1,中心:真实,懒加载:真,点:假});});
如果您需要任何帮助,请告诉我:)
I have an image which covers the entire screen on a desktop using Owl Carousel.
When i view the same image on a phone device it takes up only 1 third of the screen size.
How could i adjust the height so its taller than what it currently is on a phone?
I've read a few threads but being new with Owl carousel im not sure if i've done something wrong. I couldnt find this class https://css-tricks.com/forums/topic/owl-slider-100-height/ so not sure
My config for Owl carousel is
items: 1,
smartSpeed: 1000,
autoplay: true,
autoplayTimeout: 6000,
dots: false,
loop: true,
mouseDrag: false,
autoHeight:false,
touchDrag: false,
autoHeight:true
Owl Carousel v2.3.4
CSS Used (https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css )
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative
}
.owl-carousel {
display: none;
width: 100%;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0)
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0)
}
.owl-carousel .owl-item {
min-height: 100%;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
display: none
}
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
background: 0 0;
color: inherit;
border: none;
padding: 0!important;
font: inherit
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel.owl-refresh .owl-item {
visibility: hidden
}
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-grab {
cursor: move;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.owl-carousel .animated {
animation-duration: 1s;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
animation-name: fadeOut
}
@keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
transition: height .5s ease-in-out
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity .4s ease
}
.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
max-height: 0
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform .1s ease
}
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3)
}
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
display: none
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity .4s ease
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%
}
解决方案
From what I've gathered, you want the container to be full height and full width on Desktop and Mobile using Owl Carousel.
I made a Pen for you which may help you on your way to getting where you want to get to with Owl Carousel - I don't know much about it as I tend not to use Carousels any more but it is a good solution for carousels!
https://codepen.io/kurtis-rogers/full/NozyEz
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Owl Carousel 2 Example</title>
</head>
<body>
<div class="owl-carousel">
<div class="post-content-parent">
<div class="c--post-content-image-wrapper"></div>
<div class="post-content-text-child">
<div class="post-content--inner">
<h2>Slider 1</h2>
<p>Some information about slider 1</p>
</div>
<input type="button" value="Read more">
</div>
</div>
<div class="post-content-parent">
<div class="c--post-content-image-wrapper"></div>
<div class="post-content-text-child">
<div class="post-content--inner">
<h2>Slider 1</h2>
<p>Some information about slider 1</p>
</div>
<input type="button" value="Read more">
</div>
</div>
</div>
</body>
</html>
CSS(SCSS):
body, html{
padding: 0;
margin: 0;
}
.owl-carousel, .owl-stage-outer {
max-height: 100%;
height: 100vh;
}
// Parent container for the images and text
.post-content-parent{
display: flex;
width: 100%;
height: 100vh;
position: relative;
}
// Post content image styles
.c--post-content-image-wrapper{
position: absolute;
width: 100%;
height: 100vh;
top: 0;
bottom: 0;
background: url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
// Post text content
.post-content-text-child{
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.7);
z-index: 1;
padding: 20px 0;
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0;
width: 100%;
height: auto;
.post-content--inner {
padding-left: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-weight: lighter;
}
h2, p {
margin: 0;
}
input[type="button"] {
margin-right: 20px;
}
}
JavaScript:
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop: true,
items: 1,
center: true,
lazyLoad: true,
dots: false
});
});
If you need any help with this let me know :)
这篇关于手机上猫头鹰旋转木马的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文