javascript - 对于 html/css/js，在移动模式下幻灯片放映一个周期后， slider 图像会恢复为原始大小

标签 javascript jquery html css image

这是 slider style.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; }

我想在移动模式下增加 slider 容器的高度。添加以下代码可以工作，但不完全。

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

slider 高度最初设置为 100%，但找不到在哪里将其更改为我想要的大小。 slider 中的图像已调整为 400 像素，但在浏览完幻灯片中的所有图像后，由于 jquery 动画未调整大小，因此大小在原始大小和 400 像素之间来回移动。下面的代码是index.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 覆盖。

查看您的 codepen #slider-v4 是使用 min-height 属性初始化的，您可能还可以设置 max-height 属性， slider 在循环返回时可能会获取这些值。

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

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 像素的 min-height 进行初始化，其他情况下使用 800 像素进行初始化。

关于javascript - 对于 html/css/js，在移动模式下幻灯片放映一个周期后， slider 图像会恢复为原始大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45084241/

上一篇：Javascript:数组中的多个过滤器

下一篇：javascript - 没有特定子项的 Protractor 过滤器元素

相关文章：

javascript - 更新动态插入表的值

javascript - Web 浏览器上的 SVG 和音频

javascript - 如何跟踪哪个 Javascript 使用给定的 HTML 元素进行操作？

asp.net - 我的 HTML5 文档类型必须在第一行吗？

javascript - Google map HTMLMarker(循环不同位置)

html - 如何在 Ionic-Angular 中动态更改图标颜色？

javascript - 如何设置域以避免 d3 图中的点和轴重叠？

javascript - 插入点位置上的 RichText 编辑器按钮状态

jquery - 如何在 sprite Navigation 中使用 jQuery 实现淡入淡出效果

jquery - 如何让 jQuery 移动 ListView 与复选框和图标一起工作

©2024 IT工具网  联系我们