Как сделать слайдер изображения отзывчивым на каждом устройстве? - PullRequest
Новая
       32

Как сделать слайдер изображения отзывчивым на каждом устройстве?

1 голос
/ 29 января 2020

Мой html код, подобный этому: 

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="slider.css">
    <title>Home</title>   
</head>

<body class="header-static ">
    <div class="page-container">
        <div id="nav-white-left">
            <div class="navbar blue-txt">
                <nav class="nav-extended navbar-white z-depth-0">
                    <div class="nav-wrapper" style="color:black;text-align: center;">
                        Header
                    </div>     
                </nav>
            </div>
        </div>

        <section class="sec-homepage" style="background-color:#FFFFFF">
            <div class="image-background" style="background-image: url('');">
                <div class="color-overlay-section" data-direction="bottom"
                    data-hex1="000000"
                    data-hex2="000000"
                    data-opacity1="0.6"
                    data-opacity2="0.6">
                    <div class="white-text center">
                        <div class="swiper-container swiper-homepage">
                            <div class="swiper-wrapper ">
                                <div class="swiper-slide">
                                    <div class="hide-on-med-and-down swiper-slide-bg " style=background-image:url(&#39;https://img.techpowerup.org/200129/slider1.png&#39;);">
                                        <div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25"></h5>
                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide-bg hide-on-large-only " style=background-image:url(&#39;https://img.techpowerup.org/200129/slider1.png&#39;);>
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25"></h5>

                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">        
                                    <div class="hide-on-med-and-down swiper-slide-bg " style=background-image:url(&#39;https://img.techpowerup.org/200129/slider2.png&#39;);">
                                        <div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25">&nbsp;</h5>
                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide-bg hide-on-large-only " style=background-image:url(&#39;https://img.techpowerup.org/200129/slider2.png&#39;);>
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25">&nbsp;</h5>
                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>                
                    </div>
                </div>
            </div>
        </section>

        <section class="blue-3-colomn" style="background-color:#FFFFFF">
            <div class="image-background" style="background-image: url('');">
                <div class="" data-direction="bottom"
                    data-hex1=""
                    data-hex2=""
                    data-opacity1="0.6"
                    data-opacity2="0.6">
                    <div class="container-cstm  blue-txt">
                        <div class="row bottom-0" style="text-align: center;">
                            Content
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <footer class="page-footer white">
            <div class="footer-copyright border-top-grey white">
                <div class="container grey-text text-darken-1 center">
                    <div class="container grey-text text-darken-1 center">
                        Footer
                    </div>
                </div>
            </div>
        </footer>

    </div>

</body>

</html>

Демо и полный код, подобный этому:

https://codepen.io/positivethinking639/pen/WNbBjGX

Я проверяю на мобильной версии (android и iphone) и на планшете тоже не реагирует

Как сделать так, чтобы он реагировал на все устройства?

Ответы [ 2 ]

2 голосов
/ 30 января 2020

В приведенном выше атрибуте стилей кода отсутствует много двойных кавычек

Добавлены исправления к этим

Добавлены дополнительные css к тегу изображения

Вот рабочий код: https://codepen.io/chansv/full/gObJEPv

Найдите здесь рабочий код 

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="slider.css">
    <title>Home</title>   
</head>

<body class="header-static ">
    <div class="page-container">
        <div id="nav-white-left">
            <div class="navbar blue-txt">
                <nav class="nav-extended navbar-white z-depth-0">
                    <div class="nav-wrapper" style="color:black;text-align: center;">
                        Header
                    </div>     
                </nav>
            </div>
        </div>

        <section class="sec-homepage" style="background-color:#FFFFFF">
            <div class="image-background" style="background-image: url('');">
                <div class="color-overlay-section" data-direction="bottom"
                    data-hex1="000000"
                    data-hex2="000000"
                    data-opacity1="0.6"
                    data-opacity2="0.6">
                    <div class="white-text center">
                        <div class="swiper-container swiper-homepage">
                            <div class="swiper-wrapper ">
                                <div class="swiper-slide">
                                    <div class="hide-on-med-and-down swiper-slide-bg " style="background-image:url(&#39;https://img.techpowerup.org/200129/slider1.png&#39;); background-size: 100% 100%;">
                                        <div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25"></h5>
                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide-bg hide-on-large-only " style="background-image:url(&#39;https://img.techpowerup.org/200129/slider1.png&#39;); background-size: 100% 100%;">
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25"></h5>

                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">        
                                    <div class="hide-on-med-and-down swiper-slide-bg " style="background-image:url(&#39;https://img.techpowerup.org/200129/slider2.png&#39;); background-size: 100% 100%;">
                                        <div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25">&nbsp;</h5>
                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide-bg hide-on-large-only " style="background-image:url(&#39;https://img.techpowerup.org/200129/slider2.png&#39;); background-size: 100% 100%;">
                                        <div class="header-content">
                                            <div class="center-ct">
                                                <h3 class="title"></h3>
                                                <h5 class="subtitle bottom-25">&nbsp;</h5>
                                                <a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>                
                    </div>
                </div>
            </div>
        </section>

        <section class="blue-3-colomn" style="background-color:#FFFFFF">
            <div class="image-background" style="background-image: url('');">
                <div class="" data-direction="bottom"
                    data-hex1=""
                    data-hex2=""
                    data-opacity1="0.6"
                    data-opacity2="0.6">
                    <div class="container-cstm  blue-txt">
                        <div class="row bottom-0" style="text-align: center;">
                            Content
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <footer class="page-footer white">
            <div class="footer-copyright border-top-grey white">
                <div class="container grey-text text-darken-1 center">
                    <div class="container grey-text text-darken-1 center">
                        Footer
                    </div>
                </div>
            </div>
        </footer>

    </div>

</body>

</html>
0 голосов
/ 29 января 2020

Таким образом, для вашего Javascript вы можете сделать что-то вроде этого: 

function sizeSlider(){
    var w = window.innerWidth;
    document.getElementById('mySlider').style.width =  w
}

window.addEventListener("resize", sizeSlider);  // set size on load
document.addEventListener('DOMContentLoaded', sizeSlider}); // set size on resize

И чтобы ваш слайдер не был назван mySlider

<div id="mySlider">...</div>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...