时间戳

首页 > 解决方案 > 引导轮播滑得太远

html - 引导轮播滑得太远

问题描述

我有一个居中的 Bootstrap 3.3.7 轮播。现在图像滑得太远，然后“弹弓”回到中心。这在中等屏幕上尤其明显，然后是桌面尺寸，而在我所注意到的移动设备上则完全没有。对于占位符图像，该行为在视觉上略有不同。但我猜想拥有占位符图像可以让我们更好地了解真正发生的事情。所以我不确定，但过渡幻灯片期间的重叠可能也是一个问题。

*,
html {
 margin: 0;
 padding: 0;
 font-size: 8px;
}

body {
 width: 100vw;
 height: 100vh;
 overflow-x: hidden;
}

img {
 max-width: 100vw;
}

@font-face {
 font-family: "PierSans";
 src: url(../fonts/PierSans-Bold.otf);
 font-style: normal;
 font-weight: 800;
}

h1,h2,h3,h4,h5,h6 {
 font-family: "Poppins";
}

p {
 font-family: "Roberto";
 font-size: 3rem;
 letter-spacing: 0.04vw;
}

@media only screen and (max-width: 991px) {
 #testimonial p {
  margin-right: 6vw;
  margin-left: 6vw;
 }
 #info1 .info-left {
  text-align: center;
 }
 #info1 img {
  height: 40vmax;
 }
}

#info1 div.carousel-inner {
 display: flex;
 justify-content: center !important;
}

#info1 .info-right {
 margin-top: 135px;
 margin-left: 1px !important;
}

@media only screen and (max-width: 991px) {
 #info1 .info-right {
  margin-top: -4vh;
  margin-right: 6vw;
  margin-left: 10vw !important;
  margin-bottom: 8vh;
 }
 #info1 .info-left {
  text-align: center;
 }
 #info1 img {
  height: 40vmax;
 }
}

#info2 {
 margin: 20px 0 60px 0;
 padding-top: 125px;
}

@media only screen and (max-width: 991px) {
 #info2 .info-left {
  margin-top: 8vh;
  margin-right: 6vw;
  margin-left: 10vw !important;
  margin-bottom: 8vh;
 }
 #info2 .info-right {
  margin-right: 6vw;
  margin-left: 10vw !important;
  margin-bottom: 8vh;
 }
}

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

  <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>


  <title>Google Home</title>
  <link
    href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500"
    rel="stylesheet" type="text/css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,800;1,400;1,600;1,800&display=swap"
    rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/mediastyle.css">

</head>

<body>
  
   <section id="info1">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="info-left">
            <!--begin Bootstrap Carousel-->
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="http://placehold.jp/511x510.png" alt="google_home_speaker">
                </div>
                <div class="item">
                  <img src="http://placehold.jp/511x510.png" alt="google_home_speaker">
                </div>
                <div class="item">
                  <img src="http://placehold.jp/511x510.png" alt="google_home_speaker">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="info-right">
            <h2>Get To Know Google Home Assistant</h2>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore
              libero ex itaque facere saepe doloremque, enim iure laborum
              numquam aut ea repellat quis aliquid id accusamus fuga illo,
              excepturi fugiat!
            </p>
            <br />
            <a href="#info2" class="btn btn-default btn-lg">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <hr />

  <footer>
    <p class="text-center">Google Home Copyright &copy; 2020</p>
  </footer>

  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <script>
    window.sr = ScrollReveal();
    sr.reveal(".navbar", {
      duration: 2000,
      origin: "bottom",
    });
    sr.reveal(".showcase-left", {
      duration: 2000,
      origin: "top",
      distance: "300px",
    });
    sr.reveal(".showcase-right", {
      duration: 2000,
      origin: "right",
      distance: "300px",
    });
    sr.reveal(".showcase-btn", {
      duration: 2000,
      delay: 2000,
      origin: "bottom",
    });
    sr.reveal("#testimonial div", {
      duration: 2000,
      origin: "bottom",
    });
    sr.reveal(".info-left", {
      duration: 2000,
      origin: "left",
      distance: "300px",
      viewFactor: 0.2,
    });
    sr.reveal(".info-right", {
      duration: 2000,
      origin: "right",
      distance: "300px",
      viewFactor: 0.2,
    });
  </script>

  <script>
    $(function () {
      // Smooth Scrolling
      $('a[href*="#"]:not([href="#"])').click(function () {
        if (
          location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
          location.hostname == this.hostname
        ) {
          var target = $(this.hash);
          target = target.length ?
            target :
            $("[name=" + this.hash.slice(1) + "]");
          if (target.length) {
            $("html, body").animate({
                scrollTop: target.offset().top,
              },
              1000
            );
            return false;
          }
        }
      });
    });

    // THIS CAN ALSO BE USED TO RESOLVE THE SCROLLING ANCHOR ISSUE WITH THE NAVBAR OVERHANG
    // $("header .nav a[href!=#]").each(function(){
    //     $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
    // }); 
  </script>

  <script src="assets/index.js"></script>





</body>

</html>

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

  <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>


  <title>Google Home</title>
  <link
    href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500"
    rel="stylesheet" type="text/css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,800;1,400;1,600;1,800&display=swap"
    rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/mediastyle.css">

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
          <span class="sr-only ml-auto">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <span class="nav-logo">Google</span>
          <span class="nav-brand">Home</span>
        </a>
      </div>

      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <!--"navbar-right 'or left'" moves this component in that direction-->
          <li><a href="#showcase">Home</a></li>
          <li><a href="#info1">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  
  <section id="info1">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="info-left">
            <!--begin Bootstrap Carousel-->
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="img/image2.png" alt="google_home_speaker">
                </div>
                <div class="item">
                  <img src="img/image4.png" alt="google_home_speaker">
                </div>
                <div class="item">
                  <img src="img/image5.png" alt="google_home_speaker">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="info-right">
            <h2>Get To Know Google Home Assistant</h2>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore
              libero ex itaque facere saepe doloremque, enim iure laborum
              numquam aut ea repellat quis aliquid id accusamus fuga illo,
              excepturi fugiat!
            </p>
            <br />
            <a href="#info2" class="btn btn-default btn-lg">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <p class="text-center">Google Home Copyright &copy; 2020</p>
  </footer>

  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <script>
    window.sr = ScrollReveal();
    sr.reveal(".navbar", {
      duration: 2000,
      origin: "bottom",
    });
    sr.reveal(".showcase-left", {
      duration: 2000,
      origin: "top",
      distance: "300px",
    });
    sr.reveal(".showcase-right", {
      duration: 2000,
      origin: "right",
      distance: "300px",
    });
    sr.reveal(".showcase-btn", {
      duration: 2000,
      delay: 2000,
      origin: "bottom",
    });
    sr.reveal("#testimonial div", {
      duration: 2000,
      origin: "bottom",
    });
    sr.reveal(".info-left", {
      duration: 2000,
      origin: "left",
      distance: "300px",
      viewFactor: 0.2,
    });
    sr.reveal(".info-right", {
      duration: 2000,
      origin: "right",
      distance: "300px",
      viewFactor: 0.2,
    });
  </script>

  <script>
    $(function () {
      // Smooth Scrolling
      $('a[href*="#"]:not([href="#"])').click(function () {
        if (
          location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
          location.hostname == this.hostname
        ) {
          var target = $(this.hash);
          target = target.length ?
            target :
            $("[name=" + this.hash.slice(1) + "]");
          if (target.length) {
            $("html, body").animate({
                scrollTop: target.offset().top,
              },
              1000
            );
            return false;
          }
        }
      });
    });

    // THIS CAN ALSO BE USED TO RESOLVE THE SCROLLING ANCHOR ISSUE WITH THE NAVBAR OVERHANG
    // $("header .nav a[href!=#]").each(function(){
    //     $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
    // }); 
  </script>

  <script src="assets/index.js"></script>





</body>

</html>

标签： htmlcss

解决方案

我能够通过删除来解决这个问题：

`#info1 div.carousel-inner {
        display: flex;
        justify-content: center
 }`

...并将其替换为：

`@media only screen and (max-width: 991px) {
   #info1 div.carousel-inner {
        display: inline-block;
        left: 25%
  }
}`

推荐阅读