Bootstrap Carousel Не работает и мешает другим jquery. Почему это?

Я пробовал в течение довольно долгого времени, чтобы понять, как вставить карусель для начальной загрузки, не повезло. Я не знаю, является ли это bc того, как я вставляю скрипт. Я загрузил загрузочный лоток и поместил его в свою папку. Я слежу за видео после видео и онлайн-уроков без везения. С тем, что у меня есть сейчас, я вижу, что каким-то образом скрипт вмешивается в мой навигатор, выпадающая информация, которая появляется, когда вы наводите курсор на слова, теперь разделяется, когда они были непосредственно под словом без отступов или полей между , Я просто хочу иметь карусель прямо под моим навигатором, но все же позволяю навигатору сбрасываться с информацией, когда он зависает, используя js, который я уже разместил.Bootstrap Carousel Не работает и мешает другим jquery. Почему это?

Вот мой код. Может кто-то, пожалуйста, помогите мне понять, что происходит не так и как это исправить?

мой HTML является:

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Gender Identity 2</title> 



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

</head> 
<div class="container"> 
<header> 
    <img class="banner" src="images/banner.png"> 
    <div class="gender"> 
    <h3> Gender Identity </h3> 
    </div> 
</header> 

<div id="wrap"> 

<div id="tabwrap"> 
    <ul id="tabs"> 
    <li > 
    <a href="#bacon" class="cyan">Terms</a> 
    </li> 

    <li> 
    <a href="#batfish" class="green">Resources</a> 
    </li> 

    <li> 
    <a href="#tuna" class="lav">Culture</a> 
    </li> 

    <li> 
     <a href="#sausage" class="teal">Share</a> 
    </li> 

    </ul> 

    <div id="content"> 
    <div id="bacon" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div> 
    <div id="batfish" class="animated"><p>Batfish warmouth orbicular combtooth blenny; madtom, knifefish handfish rock beauty armorhead frogfish. Cownose ray pupfish pencilfish char fangtooth marblefish longfin dragonfish armored searobin hamlet.</p></div> 
    <div id="tuna" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div> 
    <div id="sausage" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p> 
    </div> <!-- End of Div--> 
    </div> <!-- End of Div--> 
    </div><!-- End of Div--> 

<!-- Carousel Code Start --> 

<div id = "myCarousel" class = "carousel"> 

<ol class = "carousel-indicators"> 
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li> 
<li data-target = "#myCarousel" data-slide-to = "1"></li> 
<li data-target = "#myCarousel" data-slide-to = "2"></li> 
</ol> 

<div class = "carousel-inner"> 

<div class = "item active"> 
<img src="http://placehold.it/1250x660" alt = "pic1" class = "img-responsive"> 
</div> 


<div class = "item"> 
<img src="http://placehold.it/1250x660" alt = "pic1" class = "img-responsive"> 
</div> 


<div class = "item"> 
<img src="http://placehold.it/1250x660" alt = "pic1" class = "img-responsive"> 
</div> 

</div> 

</div> 

<!-- <div class="main-caro"> 
    <img src="http://placehold.it/1250x660"> 

    </div> <!-- End of Div--> --> 

<!-- Carousel Code End --> 

</div> <!-- End of last Div--> 

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 
    <script src="js/index.js"></script> 

<!-- Bootstrap --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 


</body> 
</html>

мой КСС:

@font-face { font-family: "aqua"; 
    src: url('aqua.ttf'); } 
@font-face { font-family: "axis"; 
    src: url('Axis Extrabold.otf'); } 
@font-face { font-family: "atami"; 
    src: url('Atami-Regular.otf'); } 



.container { 
    width: 100%; 
    margin: 0 auto; 
} 

.banner{ 
    display: block; 
margin: 0 auto; 
    width: 100%; 
    min-width: 400px; 
} 

.gender { 
    padding-top: 20px; 
    padding-bottom: 20px; 
/* background-color: black; */ 
    margin-bottom: 20px; 
} 
.gender h3{ 
text-align: center; 
color: rgb(0,0,0); /* white*/ 
    animation: rgb infinite alternate; 
    animation-duration: 15s; 
    font-size: 2em; 
} 

@keyframes rgb { 
    /* 0% will fallback to the default background-color of #rgb*/ 
50% {color: rgb(29,185,226); /*blue*/ } 
    75% {color: rgb(105,45,138); /*purple*/ } 
    100% {color: rgb(237,49,147); /*pink*/} 
} 

h3{ 
font-family: "axis", sans-serif; 
} 

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } 

#wrap { width: 75%; margin: 0 auto; min-width: 300px; max-width: 1400px; } 

#tabwrap { 
    background: #fff; 
    overflow: hidden; 
    width: 100%; 
    min-height: 300px; 
    margin: 0 auto; 
    /*box-shadow: 0 0 20px #ddd;*/ 
    /*border: 1px solid #ddd;*/ 
} 
#tabs { overflow: hidden; } 
#tabs li { list-style: none; 
      font-family: "axis", sans-serif; } 

#tabs li a { 
    float: left; 
    display: block; 
    padding: 10px; 
    color: black; 
    width: 25%; 
    text-decoration: none; 
    text-align: center; 
    /*border-right: 1px solid #555; 
    border-left: 1px solid #888;*/ 
    font-size: 15px; 

} 

#tabs li a:hover { background: #666; } 
#tabs li:first-child a { border-left: 0; } 
#tabs li:last-child a { border-right: 0; } 

#tabs li.current a { 
    background: #fff; 
    color: #666; 

} 

#tabs li.current a.cyan{ 
    background: rgb(245,166,200); /*pink*/ 
    color: white; 
} 

#tabs li.current a.green{ 
background-color: rgb(164,206,249); /*blue*/ 
    color: white; 
} 

#tabs li.current a.lav{ 
background-color: rgb(200,200,255); 
    color: white; 
} 


#tabs li.current a.teal{ 
background-color: rgb(163,109,174); 
    color: white; 
} 



#content > div { 
    clear: both; 
    padding: 20px; 
    line-height: 19px; 
    color: white; 
    display: none; 
font-family: "axis", sans-serif; 

} 
.animated { 
    -webkit-animation-duration: 1s; 
     -moz-animation-duration: 1s; 
     -o-animation-duration: 1s; 
      animation-duration: 2s; 
} 

#content .current { display: block } 
#content p { margin: 0 0 20px 0;} 

@-webkit-keyframes fadeInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-10px); 
    transform: translateX(-10px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

@keyframes fadeInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-10px); 
    -ms-transform: translateX(-10px); 
    transform: translateX(-10px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

.fadeInLeft { 
    -webkit-animation-name: fadeInLeft; 
    animation-name: fadeInLeft; 
} 

#bacon { 
    background-color: rgb(245,166,200); /*pink*/ 
} 

#batfish { 
    background-color: rgb(164,206,249); /*blue*/ 
} 

#tuna { 
    background-color: rgb(200,200,255); 
} 

#sausage { 
    background-color: rgb(163,109,174); 
    z-index: 1; 
} 

.main-caro img{ 
    display:block; 
    width: 100%; 
    margin: 0 auto; 
    margin-top: -215px; 
padding-top: 20px; 
    padding-bottom: 20px; 
    z-index:-1; 
}

и мои JS является:

$('#tabs li a').hover(function(e) { 
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft'); 
    $(this).parent().addClass('current'); 
    var currentTab = $(this).attr('href'); 
    $(currentTab).addClass('current fadeInLeft'); 
    e.preventDefault(); 

}, function(){ 
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft'); 
});

Опять же, я скачал загрузчик и вставил его в мой основной как его собственная папка с именем bootstrap, где находятся папка css и js-папка.

Благодарим за предоставленную помощь!

источник

2016-12-03 Lubidia13

Причина разделения между меню ссылок вы наведите курсор мыши на и поле, которое появляется при наведении это правило стиля от bootstrap.min.css

ol, ul { 
    margin-bottom: 10px; 
    margin-top: 0px; 
}

сделать вкладки уль есть 0px запас дно добавить к вашей style.css:

ul#tabs { 
    margin-bottom: 0px; 
}

Я не знаю, почему карусель не работает для вас. Меня устраивает. Возможно, он работает, но поскольку все изображения одинаковы, он не похож на него?

Это plunker с исправлением дополнительного места.

EDIT (добавление решения карусельного вопроса):

изменения

<div id="myCarousel" class="carousel">

<div id="myCarousel" class="carousel slide">

и если вы хотите, чтобы карусель для цикла автоматически нужно добавить

$(function() { 
    $('.carousel').carousel(); 
});

на ваш javascript.

источник

2016-12-03 04:42:25

Благодарим вас за помощь с навигацией! Я очень это ценю. Другой вопрос: является ли bootstrap css также причиной того, что карусель находится так далеко от навигатора? Кажется, что между ними есть большое количество дополнений. Я бы хотел, чтобы навигатор находился прямо над слайдером, и, возможно, 40 пикселей пространства между ними. Если это имеет смысл? – Lubidia13

Дополнительное пространство между nav и carousel - это один из ваших пользовательских правил стиля: #tabwrap {min-height: 300px; }, так что просто удалите эту минимальную высоту и добавьте padding-bottom: 40px; –

И прежде чем вы спросите, чтобы окно зависания появилось поверх карусели вместо того, чтобы отталкивать ее, добавьте правило стиля: #content {position: absolute; z-index: 1; } –

Вы пытались добавить noConflict в библиотеку jQuery, которая загружается в последний раз? У меня была аналогичная проблема, когда моя карусель работала одна, но как только я добавил ее на страницу, которая уже использовала библиотеку jQuery, выяснилось, что библиотеки не очень хорошо соединяются.

Ваш код загружает две библиотеки jQuery.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

затем

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Держу пари, он нуждается в noConflict добавил.

jQuery.noConflict()

источник

2016-12-03 04:36:02 godfathr

Bootstrap Carousel Не работает и мешает другим jquery. Почему это?

ответ

Смежные вопросы