Ползунок карусели bootstrap 4 с различными изображениями на различных устройствах - PullRequest
Новая
       0

Ползунок карусели bootstrap 4 с различными изображениями на различных устройствах

1 голос
/ 05 апреля 2020

Я пытаюсь сделать карусель в bootstrap 4, где фоновые изображения различны на рабочем столе и различны в мобильных телефонах. Что интересно, когда код похож на внизу, слайдер на рабочем столе работает, на мобильном нет - изображения не меняются. Но если я изменил код и поставил блок выше, то слайдер работает в мобильном представлении, но не на рабочем столе.

Мой css: 

.mobile-image{
  display: block;
  }

.desktop-image{
  display: none;
 }

@media (min-width:992px){
  .mobile-image{
    display: none;
   }
 .desktop-image{
   display: block;
 }
 }

и html: 

<div class="image-container">

    <div class="desktop-image">
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active" style="background-image: url(img/slide1.jpg);">
                <div class="carousel-caption text-center">
                    <h1><img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/></h1>
                    <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(img/HydriveTeam.jpg);"></div>
            <div class="carousel-item" style="background-image: url(img/HydriveShell.jpg);"></div>
        </div>
    </div>

    <div class="mobile-image">
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active" style="background-image: url(img/1.jpeg);">
                <div class="carousel-caption text-center">
                    <h1><img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/></h1>
                    <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(img/2.jpeg);"></div>
            <div class="carousel-item" style="background-image: url(img/3.jpeg);"></div>
        </div>
    </div>

    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>

У кого-нибудь есть идеи, как это исправить?

1 Ответ

0 голосов
/ 17 апреля 2020

вот оно: 

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

<head>
    <meta charset="UTF-8"></meta>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

    <meta http-equiv="X-UA-Compatible" content="ie=edge"></meta>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></link>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"></link>

    <link rel="stylesheet" href="style.css"></link>

    <title>Title</title>
</head>

<body>
    <div id="carouselExampleControls" class="carousel slide img-fluid" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <picture>
                    <source srcset="1.jpg" media="(max-width: 576px)"></source>

                    <source srcset="2.jpg" media="(min-width: 576px)"></source>

                    <img src="1.jpg">
                </picture>
            </div>

            <div class="carousel-item">
                <picture>
                    <source srcset="1.jpg" media="(max-width: 576px)"></source>

                    <source srcset="2.jpg" media="(min-width: 576px)"></source>

                    <img src="1.jpg">
                </picture>
            </div>

            <div class="carousel-item">
                <picture>
                    <source srcset="1.jpg" media="(max-width: 576px)"></source>

                    <source srcset="2.jpg" media="(min-width: 576px)"></source>

                    <img src="1.jpg">
                </picture>


            </div>
        </div>

        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>
        </a>

        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>

            <span class="sr-only">Next</span>
        </a>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>

</html>

см .: https://jsfiddle.net/sugandhnikhil/t6gr4few/

Пожалуйста, используйте краску, чтобы изменить 1.jpg и 2.jpg на 576px и 1200px соответственно .

И как гласит теория: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Спасибо !!! : -)

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

Нет похожих вопросов

...