Итак, у меня есть простая карусель, которая отлично работала, пока я не решил добавить bootstrap. После того, как я добавил таблицу стилей bootstrap (не файл сценария), содержимое моей карусели теперь появляется на секунду, а затем исчезает.
Я могу нажать на элементы управления, и содержимое появляется снова, но затем снова исчезает. Я думал, что таблица стилей bootstrap переопределяет мои классы "prev" и "next" для элементов управления, поэтому я просто переименовал их, но все равно ничего. Я не хочу менять свой сценарий карусели, так как раньше он работал просто отлично, но будет, если нужно. Любая помощь в выяснении, что вызывает это? Есть другой сценарий для второй карусели, но он почти идентичен этому. Я не знаю, поможет ли мой css, но я все равно разместил его. Пожалуйста, помогите :(
Мой HTML:
<!--project section headings-->
<div class="projects">
<a>
<div class="box projects-others" style="color: #ffdb4d;">
<h1 style="color: #ffdb4d;">Projects :<br> Others</h1>
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="project-text">
<h2><a href="#">ProjectD</a></h2>
</div>
</div>
<div class="mySlides fade">
<div class="project-text">
<h2><a href="#">ProjectE</a></h2>
</div>
</div>
<div class="mySlides fade">
<div class="project-text">
<h2><a href="#">ProjectF</a></h2>
</div>
</div>
<a class="previous p-others" onclick="plusSlides(-1)">❮</a>
<a class="nexxt n-others" onclick="plusSlides(1)">❯</a>
</div>
</div>
</a>
<a>
<div class="box projects-coding" style="color:#00004d;">
<h1 style="color:#00004d;">Projects :<br> Coding</h1>
<!--second slider starts-->
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectA</a></h2>
</div>
</div>
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectB</a></h2>
</div>
</div>
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectC</a></h2>
</div>
</div>
<a class="previous p-coding" onclick="plusSlides2(-1)">❮</a>
<a class="nexxt n-coding" onclick="plusSlides2(1)">❯</a>
</div>
</div>
</a>
</div>
CSS:
/*project section starts*/
.projects {
overflow: hidden;
height: 27em;
margin-top: 50px;
border: ;
}
.projects a {
cursor: default;
}
.box {
box-sizing: border-box;
box-shadow: 1.1px 1.2px #595959;
}
.projects h1 {
font-size: 4.40em;
text-align: center;
text-shadow: 0 3px 3px rgba(0,0,0,0.9);
font-family: 'Dancing Script', cursive;
line-height: 80px;
padding-top: 55px;
}
.projects-others, .projects-coding {
width: 50%;
-moz-transition: width .3s;
-webkit-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
height: 27em;
padding: 1em;
box-sizing: border-box;
}
.projects-others {
float: right;
background: #00004d;
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.projects-coding {
background: white;
border-right:;
}
.projects:hover .projects-others {
width: 40%;
}
.projects-coding:hover {
width: 60% ;
}
.projects-others:hover {
width: 60% !important;
}
.projects-others:hover ~ .projects-coding {
width: 40%;
}
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: auto;
}
.mySlides, .mySlides2 {
display:none;
}
.project-text {
color:;
display: flex;
font-size: 20px;
padding:12px;
position: absolute;
bottom: 1px;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.fade {
-moz-animation-name:fade;
-webkit-animation-name: fade;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.project-text a, a:visited, {
}
.previous, .nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top:;
font-weight: bold;
font-size: 28px;
transition:0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right:0;
border-radius: 3px 0 0 3px;
}
.previous:hover, .nexxt:hover {
cursor: pointer;
}
.p-others:hover, .n-others:hover {
background-color: white;
color: #00004d;
}
.p-coding:hover, .n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
@-webkit-keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.previous, .nexxt,.text {font-size: 11px}
}
Сценарий:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active","");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}