Slideshow funktioniert mobil nicht

  • HTML

    Slideshow funktioniert mobil nicht

    Hallo,

    mit folgenden Punkten komme ich an meiner Website nicht mehr weiter - hoffe hier um Hilfe.

    Öffne ich meine Seite am Handy funktioniert meine Slideshow nicht und die "Ausklappfunktion" der Navbar funktioniert nicht.
    Öffne ich die Seite mit Firefox, geht das Dropdownmenü der Navbar nicht. Wenn ich die Seite jedoch im IE öffne, funktioniert es.

    Hoffe es kennt jemand die Lösung.
    Hier der Code.

    HTML-Quellcode

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    6. <meta name="description" content="">
    7. <meta name="author" content="">
    8. <link rel="icon" href="Bilder/favicon.jpg">
    10. <title>Home</title>
    12. <!-- Bootstrap core CSS -->
    13. <link href="css/bootstrap.min.css" rel="stylesheet">
    15. <!-- Custom styles for this template -->
    16. <link href="jumbotron.css" rel="stylesheet">
    18. <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    19. <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    20. <script>
    21. window.addEventListener("load", function(){
    22. window.cookieconsent.initialise({
    23. "palette": {
    24. "popup": {
    25. "background": "#c0c0c0"
    26. },
    27. "button": {
    28. "background": "#cf2f3e"
    29. }
    30. },
    31. "position": "bottom-right",
    32. "content": {
    33. "message": "Wir nutzen Cookies auf unserer Webseite um diese laufend für Sie zu verbessern. ",
    34. "dismiss": "Einverstanden",
    35. "link": "Mehr erfahren",
    36. "href": "http://www.walz-konstruktion.de/datenschutz.html"
    37. }
    38. })});
    39. </script>
    41. </head>
    42. <body>
    44. <nav class="navbar navbar-expand-md navbar-dark bg-secondary">
    45. <img class="rounded mx-auto d-block" src="Bilder/Logogrey.JPG" alt="Generic placeholder image" width="437" height="60">
    46. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    47. <span class="navbar-toggler-icon"></span>
    48. </button>
    50. <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    51. <ul class="navbar-nav mr-auto">
    52. <li class="nav-item active">
    53. <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
    54. </li>
    55. <li class="nav-item">
    56. <a class="nav-link" href="dasunternehmen.html">Unternehmen</a>
    57. </li>
    58. <li class="nav-item dropdown">
    59. <a class="nav-link dropdown-toggle" href="leistungen.html" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Leistungen</a>
    60. <div class="dropdown-menu" aria-labelledby="dropdown01">
    61. <a class="dropdown-item" href="konstruktion.html">Konstruktion</a>
    62. <a class="dropdown-item" href="sondermaschinen.html">Sondermaschinen</a>
    63. <a class="dropdown-item" href="automatisierung.html">Automatisierung</a>
    64. <a class="dropdown-item" href="stahlbau.html">Stahlbau</a>
    65. </div>
    66. </li>
    67. <li class="nav-item">
    68. <a class="nav-link" href="partner.html">Partner</a>
    69. </li>
    70. <li class="nav-item">
    71. <a class="nav-link" href="kontakt.html">Kontakt</a>
    72. </li>
    73. </ul>
    74. <form class="form-inline my-2 my-lg-0">
    75. <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
    76. <button class="btn btn-inline-danger my-2 my-sm-0" type="submit">Search</button>
    77. </form>
    78. </div>
    79. </nav>
    81. <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    82. <ol class="carousel-indicators">
    83. <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    84. <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    85. <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    86. </ol>
    87. <div class="carousel-inner">
    88. <div class="carousel-item active">
    89. <img class="d-block w-100" src="Bilder/lagerbild.jpg" alt="First slide">
    90. </div>
    91. <div class="carousel-item">
    92. <img class="d-block w-100" src="Bilder/hydro.jpg" alt="Second slide">
    93. </div>
    94. <div class="carousel-item">
    95. <img class="d-block w-100" src="Bilder/roboteranlage.jpg" alt="Third slide">
    96. </div>
    97. </div>
    98. <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    99. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    100. <span class="sr-only">Previous</span>
    101. </a>
    102. <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    103. <span class="carousel-control-next-icon" aria-hidden="true"></span>
    104. <span class="sr-only">Next</span>
    105. </a>
    106. </div>
    113. <main role="main">
    114. <!-- Main jumbotron for a primary marketing message or call to action -->
    115. <div class="jumbotron">
    116. <div class="container">
    117. <div class="container bg-faded rounded mt-3">
    118. <blockquote class="blockquote">
    119. <p class="font-weight-light">Suche nicht nach Fehlern, suche nach Lösungen!</p>
    120. <footer class="blockquote-footer">Henry Ford</footer>
    121. </blockquote>
    122. </div>
    123. <p><a class="btn btn-danger btn-lg" href="leistungen.html" role="button">Erfahren Sie mehr &raquo;</a></p>
    124. </div>
    125. </div>
    127. <div class="container">
    128. <!-- Example row of columns -->
    129. <div class="row">
    130. <div class="col-md-4">
    131. <div class="font-weight-light">
    132. <img class="rounded mx-auto d-block" src="Bilder/dasunternehmen.jpg" alt="Generic placeholder image" width="340" height="245">
    133. <h2 class="font-weight-light">Das Unternehmen</h2>
    134. <p>Erfahren Sie mehr über mich.</p>
    135. <p><a class="btn btn-outline-danger" href="dasunternehmen.html" role="button">Details &raquo;</a></p>
    136. </div>
    137. </div>
    138. <div class="col-md-4">
    139. <div class="font-weight-light">
    140. <img class="rounded mx-auto d-block" src="Bilder/waswirleisten.jpg" alt="Generic placeholder image" width="340" height="245">
    141. <h2 class="font-weight-light">Leistungen</h2>
    142. <p>Entdecken Sie hier, was ich für Sie leisten kann. </p>
    143. <p><a class="btn btn-outline-danger" href="leistungen.html" role="button">Details &raquo;</a></p>
    144. </div>
    145. </div>
    147. <div class="col-md-4">
    148. <div class="font-weight-light">
    149. <img class="rounded mx-auto d-block" src="Bilder/kontaktierensieuns.jpg" alt="Generic placeholder image" width="340" height="245">
    150. <h2 class="font-weight-light ">Kontakt</h2>
    151. <p>Sie erreichen mich unter +49(0)7302/920860.</p>
    152. <p><a class="btn btn-outline-danger" href="leistungen.html" role="button">Details &raquo;</a></p>
    153. </div>
    154. </div>
    155. </div>
    157. </div> <!-- /container -->
    159. </main>
    161. <hr>
    162. <footer>
    163. <div class="jumbotron">
    164. <div class="col-sm-8 mx-auto">
    165. <div class="font-weight-light">
    166. <p style="line-height: 50%"> Maximilian Walz Konstruktion</p>
    167. <p style="line-height: 50%">Siedlungsweg 7</p>
    168. <p style="line-height: 50%">89284 Pfaffenhofen</p>
    169. <p style="line-height: 50%">Fon: 07302/919536</p>
    170. <p style="line-height: 50%">Mail: [email=info@walz-konstruktion.de]info@walz-konstruktion.de[/email]</p>
    171. &copy; Maximilian Walz Konstruktion 2018
    172. <a href="impressum.html" class="badge badge-secondary">Impressum</a>
    173. <a href="datenschutz.html" class="badge badge-secondary">Datenschutz</a>
    174. </div>
    175. </div>
    176. </div>
    177. </footer>
    179. <!-- jQuery first, then Tether, then Bootstrap JS. -->
    180. <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    181. <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    182. <script src="js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    183. </body>
    184. </html>


    *Code-Tag eingefügt*

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

Facebook
Telefonspende