Slider images revert to original size after one cycle through slideshow in mobile mode for html/css/js
Question
This is the code in style.css for the slider.
.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; }
I want to increase the height of the slider container when it is in mobile mode. Adding the following code worked but not completely.
@media (max-width: 767px) {
.slider-v1 #slider_v1{
height: 400px !important;
}
}
The slider height was originally set to 100% but could not find where to change it to the size I want. The images in the slider were resized to 400px but after it goes through all the images in the slideshow, the sizing goes back and forth from original size to 400px because of the jquery animations not resizing. The code underneath is part of the 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>
1 answers
solution1
0 ACCPTED 2017-07-13 17:03:24
Your media query to update the height will only be temporary. After all, this value is being set in the javascript and will be overridden with javascript.
Looking at your codepen #slider-v4 is initialized with a min-height property, you can probably also set a max-height property, the slider probably grabs these values when it cycles back through.
To fix your issue, initialize your slider with the correct values based on screen width. Something like this should do:
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
});
}
}
In this example, I simply wrapped your original code in an if/else and added the min-height parameter to the initialization, in one case it initializes with a min-height of 400 pixels and in the other 800 pixels.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My Slideshow images are on top of each other???? HTML, JS , CSS
JS and CSS Centering Slideshow Images
CSS/JS Slideshow of background images
How do I get the slideshow to disappear after one cycle through (javascript)
Revert to original html after pressing Esc button
Div Slideshow (html, css, js)
Why does this HTML/JS revert back to the original after changing the inner HTML?
Without using jquery, how to cycle through images to make a simple slideshow
how to cycle through slides on basic js slider
HTML slideshow works but unable to control which images cycle
Related Tags