bootstrap -4 карусель не работает на веб-странице - PullRequest
0 голосов
/ 26 января 2020

У меня есть карусель на веб-странице, но она не работает, я пытаюсь реализовать эту карусель "codepen.io/decibeldesign/details/bMrQKN", а полный код веб-страницы - "paste.ofcode.org/saJPkuhPPixFmXgDb7EnNX", как Можно ли исправить это любое предложение? ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,

код:

 <div class="my-5 text-center container">
                            <div class="row d-flex align-items-center">
                               <div class="col-1 d-flex align-items-center justify-content-center">
                                  <a href="#carouselExampleIndicators" role="button" data-slide="prev">
                                     <div class="carousel-nav-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px;">
                                           <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z"/>
                                        </svg>
                                     </div>
                                  </a>
                               </div>
                               <div class="col-6">
                                  <!--Start carousel-->
                                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                                     <div class="carousel-inner">
                                        <div class="carousel-item active">
                                           <div class="row">
                                              <div style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/flexfun04.jpg');" class="col-12 col-md d-flex align-items-center justify-content-center">
                                              </div>
                                              <div style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/flexfun02.jpg');" class="col-12 col-md d-flex align-items-center justify-content-center">
                                              </div>
                                              <div style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/flexfun05.jpg');" class="col-12 col-md d-flex align-items-center justify-content-center" class="col-12 col-md d-flex align-items-center justify-content-center">
                                                <div class="col-md-2 col-xs-12 upcoming-btn">
                                                    <span href="" class="btn btn-success btn-lg dashboard-icon" 
                                                    style="min-width: 60px; max-width: 180px; height: 140px;">
                                                        <p style="padding-top: 25px;">date</p>
                                                        <p>Upcoming Meeting</p>
                                                    </span>
                                                </div>
                                                <div class="col-md-2 col-xs-12 completed-btn">
                                                    <span href="" class="btn btn-warning btn-lg dashboard-icon" 
                                                    style="min-width: 60px; max-width: 180px; height: 140px;">
                                                        <p style="padding-top: 25px;">date</p>
                                                        <p>Completed Meeting</p>
                                                    </span>
                                                </div>
                                              </div>
                                           </div>
                                        </div>
                                        <div class="carousel-item">
                                           <div class="row">
                                              <div style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/flexfun01.jpg');" class="col-12 col-md d-flex align-items-center justify-content-center">
                                              </div>
                                              <div style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/flexfun03.jpg');" class="col-12 col-md d-flex align-items-center justify-content-center">
                                              </div>
                                              <div style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/flexfun06.jpg');" class="col-12 col-md d-flex align-items-center justify-content-center" class="col-12 col-md d-flex align-items-center justify-content-center">
                                              </div>
                                           </div>
                                        </div>
                                     </div>
                                  </div>
                                  <!--End carousel-->
                               </div>
                               <div class="col-1 d-flex align-items-center justify-content-center"><a  href="#carouselExampleIndicators" data-slide="next">
                                  <div class="carousel-nav-icon">
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px;">
                                        <path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
                                     </svg>
                                  </div>
                                  </a>
                               </div>
                            </div>
                         </div>

1 Ответ

0 голосов
/ 26 января 2020
...