Slider Revolution in WordPress: Previous slider image zooms in before next image

醉酒当歌 提交于 2019-12-12 04:19:25

问题


I inherited this site: http://www.thinkiam.com/

It's WordPress using Slider Revolution.

The default full size of the slider & it's images is 1200p. When the screen is smaller than that, the prior slide zooms in just before the next slide loads.

And the only reason the slides initial load at the right size is because I added background-size: cover to them. Without that style, the images are not responding even when they first appear.

You can see that by inspecting and turning this off

@media screen and (max-width: 1200px)
style.css?ver=1.0.0:27
div.tp-bgimg.defaultimg, div.slot {
    background-size: cover;
}

What settings in Slider Revolution that will produce a simple responsive slider?


回答1:


in never versions of the revolution slider they figured out responsive or mobile stuff very nicely, so check if you have the latest version

just go in slider settings, click on that you want to have support for mobile and tablet (you can adjust screen sizes as well) and after that when you will edit your slider your will have extra views for mobile and tablet where you can adjust your slider for mobile

her is quite detailed tutorial: https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/

have fun




回答2:


Finally figured it out. The maddening part was that the images were the right size at all times except when the current slide receded to the background so the next slide could come in over top of it. When that happened, the now-background image became full size and spilled outside the slider viewport. I could style the image when it was on top of the stack, but not when it became the background image.

Turns out each slide in the slider has it's own styles. The "Background Size" option was set to "normal." Setting each slide to the option "contain" allowed the slider to respond to smaller screen sizes.



来源:https://stackoverflow.com/questions/42730487/slider-revolution-in-wordpress-previous-slider-image-zooms-in-before-next-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!