小贝子编程

滑块图像在移动模式下的 html/css/js 幻灯片放映中循环一个周期后恢复为原始大小



这是滑块的样式代码.css。

.slider-v1 #slider_v1, .slider-v2 #slider_v1 {
overflow: hidden;
position:relative;
width:100%;
}
.slider-v1 .banner-caption-h1, .slider-v2 .banner-caption-h1 {
font-size: 90px;
line-height: 74px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
letter-spacing: 5px;
text-shadow: -1px 0px 15px rgba(0, 0, 0, 0.7);
color: #ffffff; }
.slider-v1 .banner-caption-h1 strong, .slider-v2 .banner-caption-h1 strong {
font-weight: 700 !important;
color: #ffffff; }
.slider-v1 .banner-caption-p, .slider-v2 .banner-caption-p {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 19px;
color: #ffffff; }
.slider-v1 .banner-caption-button .better-button a, .slider-v2 .banner-
caption-button .better-button a {
line-height: 41px !important; }
.slider-v1 .services, .slider-v2 .services {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: -15px;
z-index: 99; }

我想在移动模式下增加滑块容器的高度。添加以下代码有效，但未完全添加。

@media (max-width: 767px) {
.slider-v1 #slider_v1{
height: 400px !important;
}
}

滑块高度最初设置为 100%，但找不到将其更改为所需大小的位置。滑块中的图像被调整为 400px，但在浏览幻灯片中的所有图像后，由于 jquery 动画未调整大小，大小从原始大小来回变为 400px。下面的代码是索引.html的一部分。

<div id="slider_v1" class="rev_slider"  data-version="5.0">
<ul>
<li data-transition="random" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" >
<img src="images/slider/holisticmedical_1.jpg"  alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="tp-caption tp-resizeme banner-caption-h1" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['155','155','155','155','115']" 

data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"      
data-transform_in="x:[-105%];z:0;rX:0deg;rY:0deg;rZ:-90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="1000"
data-elementdelay="0.1" >
<strong>PROFESSIONAL <br>CREDENTIALS</strong>
</div>
<div class="tp-caption tp-resizeme banner-caption-p" 
data-x="['left','left','center']" 
data-hoffset="15"
data-y="top" 
data-voffset="['230','230','230','230','180']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on">

</div>
<div class="tp-caption tp-resizeme banner-caption-button" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['330','330','330','330','240']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:50px;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[175%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_out="x:inherit;y:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on" 
data-responsive="off">

</div>
</li>
<li data-transition="random" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" >
<img src="images/slider/holisticmedical_2.jpg"  alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="tp-caption tp-resizeme banner-caption-h1" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['155','155','155','155','115']" 

data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"      
data-transform_in="x:[-105%];z:0;rX:0deg;rY:0deg;rZ:-90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="1000"
data-elementdelay="0.1" >
<strong>BACK / NECK PAIN</strong>
</div>
<div class="tp-caption tp-resizeme banner-caption-p" 
data-x="['left','left','center']" 
data-hoffset="15"
data-y="top" 
data-voffset="['230','230','230','230','180']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on">

</div>
<div class="tp-caption tp-resizeme banner-caption-button" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['330','330','330','330','240']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:50px;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[175%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_out="x:inherit;y:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on" 
data-responsive="off">

</div>
</li>
<li data-transition="random" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" >
<img src="images/slider/holisticmedical_3.jpg"  alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="tp-caption tp-resizeme banner-caption-h1" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['155','155','155','155','115']" 

data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"      
data-transform_in="x:[-105%];z:0;rX:0deg;rY:0deg;rZ:-90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="1000"
data-elementdelay="0.1" >
<strong>WEIGHT LOSS <BR>ACUPUNCTURE</strong>
</div>
<div class="tp-caption tp-resizeme banner-caption-p" 
data-x="['left','left','center']" 
data-hoffset="15"
data-y="top" 
data-voffset="['230','230','230','230','180']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on">

</div>
<div class="tp-caption tp-resizeme banner-caption-button" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['330','330','330','330','240']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:50px;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[175%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_out="x:inherit;y:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on" 
data-responsive="off">

</div>
</li>
<li data-transition="random" data-slotamount="default"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" >
<img src="images/slider/holisticmedical_4.jpg"  alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="tp-caption tp-resizeme banner-caption-h1" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['155','155','155','155','115']" 

data-width="none"                                 data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"      
data-transform_in="x:[-105%];z:0;rX:0deg;rY:0deg;rZ:-90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="1000"
data-elementdelay="0.1" >
<strong>FREE</strong> CHECKUP
</div>
<div class="tp-caption tp-resizeme banner-caption-p" 
data-x="['left','left','center']" 
data-hoffset="15"
data-y="top" 
data-voffset="['230','230','230','230','180']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;" 
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on">
<!--Nullam fermentum ipsum nec augue sodales, ac blandit diam iaculis. <br> Praesent luctus hendrerit massa sit amet scelerisque.-->
</div>
<div class="tp-caption tp-resizeme banner-caption-button" 
data-x="['left','left','center']" 
data-hoffset="15" 
data-y="top" 
data-voffset="['330','330','330','330','240']" 

data-whitespace="nowrap"
data-transform_idle="o:1;"
data-style_hover="cursor:default;"
data-transform_in="y:50px;opacity:0;s:1500;e:Power4.easeInOut;" 
data-transform_out="y:[175%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
data-mask_out="x:inherit;y:inherit;" 
data-start="2000" 
data-splitin="none" 
data-splitout="none" 
data-responsive_offset="on" 
data-responsive="off">

</div>
</li>
</ul>
</div>

https://codepen.io/bsung29/pen/weNmxv

用于更新高度的媒体查询只是暂时的。 毕竟，这个值是在javascript中设置的，并且将被javascript覆盖。

查看您的代码笔 #slider-v4 是使用 min-height 属性初始化的，您可能还可以设置最大高度属性，滑块在循环回去时可能会抓取这些值。

要解决您的问题，请根据屏幕宽度使用正确的值初始化滑块。 像这样的事情应该做：

if($(window).width() < 786 ){
if($('#slider_v1').length) {
jQuery("#slider_v1").revolution({
sliderType: "standard",
sliderLayout: "auto",
delay: 3000,
navigation: {
onHoverStop: "off"
},
responsiveLevels: [1920, 1203, 975, 751, 463],
gridwidth: [1200, 980],
gridheight: [712, 612, 512, 512, 412],
min-height: 400px
});
}
}else{
if($('#slider_v1').length) {
jQuery("#slider_v1").revolution({
sliderType: "standard",
sliderLayout: "auto",
delay: 3000,
navigation: {
onHoverStop: "off"
},
responsiveLevels: [1920, 1203, 975, 751, 463],
gridwidth: [1200, 980],
gridheight: [712, 612, 512, 512, 412],
min-height: 800px
});
}
}

在此示例中，我只是将您的原始代码包装在 if/else 中，并在初始化中添加了 min-height 参数，在一种情况下，它初始化的最小高度为 400 像素，另一种情况下为 800 像素。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium