Carousel content appears then dissapears

Question

So I have a simple carousel that was working perfectly until I decided to add bootstrap. After I added the bootstrap stylesheet (not the script file) the content for my carousel now appears for a second then disappears??

I can click on the controls and the content appears again but then disappears again. I thought the bootstrap stylesheet was overriding my "prev" and "next" classes for the controls so I just renamed them but still nothing. I don't want to change my carousel script either since it was working just fine before but will if needed. Any help in figuring out what's causing it? There's another script for the second carousel but it's pretty much identical to that one. I don't know if my css will help but I posted it anyways. Please help:(

My 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)">&#10094;</a>
                            <a class="nexxt n-others" onclick="plusSlides(1)">&#10095;</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)">&#10094;</a>
                            <a class="nexxt n-coding" onclick="plusSlides2(1)">&#10095;</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}
                        }

Script:

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";
}

Answer 1

The fade class is likely colliding with bootstrap. You can reduce the chance of collision by either giving your class names a unique prefix like .carousel-fade or by scoping your css like this:

.slideshow-container .fade {
  -moz-animation-name:fade;
  -webkit-animation-name: fade;
  -moz-animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
}

This will make yours apply only for fade class used within a slideshow-container.