Вопросы Теги

Якорные метки ломают карусельный слайдер - Bootstrap 4

Я не знаю, как работает серверная машина, но вы должны попытаться выполнить поиск после спящего компьютера, когда он неактивен или что-то в этом роде. Я уверен, что есть проблема.

0
задан 13 August 2018 в 14:18

2 ответа

Я изменяю код,

, очевидно, вы можете добавить тэг anchor в слайдер bootstarp, я просто удаляю кнопку и добавляю класс в тег привязки, а затем делаю это.

Вам не хватает закрытого якоря тег. никогда не используйте кнопку в качестве дочернего элемента метки привязки

Код выглядит следующим образом: 

    <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="custom.css">

    <title>SW Events - Tasting Menus</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
<body>
     <div class="container" id="tastingCar">
          <div id="demo" class="carousel slide" data-ride="carousel">
              <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
              </ul>

              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
                    <div class="carousel-caption text-left">
                      <h3>Whisky Tastings</h3>
                      <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
                        Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p> 
                        <div class="menuBook align-items-center">
                            <a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
                            </div>
                      </div>  
                </div>

                <div class="carousel-item">
                  <img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
                  <div class="carousel-caption text-left">
                    <h3>Gin Tastings</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
                  </div>   
                </div>

                <div class="carousel-item text-left ">
                  <img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
                  <div class="carousel-caption text-left">
                    <h3>Private Tastings</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
                  </div>   
                </div>

                <div class="carousel-item text-left ">
                        <img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
                        <div class="carousel-caption text-left">
                          <h3>Whisky Tastings</h3>
                          <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
                            Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
                            <div class="menuBook align-items-center">       
                                    <a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
                                </div>                         
                            </div>   
                      </div>

              </div>
              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>
          </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script type="text/javascript">


      $(document).ready(function(){
          $("#tastingTitle").fadeIn(750, function() {
              $("#tastingCar").fadeIn(1000, function() {
                  $("#weddingSub").fadeIn(1250);
              });
          });
      });

      var myFunc = $(document).ready(function(){
              $("#bookWedding").click(function () {
                  $("#chateauLogo").fadeOut(500);
                  $("#weddingSub").fadeOut(500);
                  $("#inAssoc").fadeOut(500);
                  $("#bookWedding").fadeOut(500, function () {
                      $("#weddingForm").fadeIn(500);

              });
          });
     });    
     $(function () {
          $( "#datepicker" ).datepicker();
      } );

      $('.carousel').carousel({
        interval: false

        });     



      </script>
      </div>
      </body>
0
ответ дан 15 August 2018 в 17:03
  • 1
    Спасибо за помощь, я не знал, что не могу использовать такие кнопки. Большое спасибо за Вашу помощь! – Mark Beefy 13 August 2018 в 16:38 

  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <title>SW Events - Tasting Menus</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
<body>
     <div class="container" id="tastingCar">
          <div id="demo" class="carousel slide" data-ride="carousel">
              <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
              </ul>

              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
                    <div class="carousel-caption text-left">
                      <h3>Whisky Tastings</h3>
                      <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
                        Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p> 
                        <div class="menuBook align-items-center">
    <!-- Anchor tag won't allow carousel to slide -->
                            <a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
                            </div>
                      </div>  
                </div>

                <div class="carousel-item">
                  <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
                  <div class="carousel-caption text-left">
                    <h3>Gin Tastings</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
                  </div>   
                </div>

                <div class="carousel-item text-left ">
                  <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
                  <div class="carousel-caption text-left">
                    <h3>Private Tastings</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
                  </div>   
                </div>

                <div class="carousel-item text-left ">
                        <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
                        <div class="carousel-caption text-left">
                          <h3>Whisky Tastings</h3>
                          <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
                            Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
                            <div class="menuBook align-items-center">
    <!-- Anchor tag won't allow carousel to slide -->
                                    <a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
                                </div>                         
                            </div>   
                      </div>

              </div>
              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>
          </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script type="text/javascript">


      $(document).ready(function(){
          $("#tastingTitle").fadeIn(750, function() {
              $("#tastingCar").fadeIn(1000, function() {
                  $("#weddingSub").fadeIn(1250);
              });
          });
      });

      var myFunc = $(document).ready(function(){
              $("#bookWedding").click(function () {
                  $("#chateauLogo").fadeOut(500);
                  $("#weddingSub").fadeOut(500);
                  $("#inAssoc").fadeOut(500);
                  $("#bookWedding").fadeOut(500, function () {
                      $("#weddingForm").fadeIn(500);

              });
          });
     });    
     $(function () {
          $( "#datepicker" ).datepicker();
      } );

      $('.carousel').carousel({
        interval: false

        });     



      </script>
      </div>
      </body>

попробуйте это

0
ответ дан 15 August 2018 в 17:03
  • 1
    Мне нравится, что это работает! вы не позволите мне узнать, что вы изменили? благодаря! – Mark Beefy 13 August 2018 в 16:37

Другие вопросы по тегам:

Похожие вопросы: