Dropdown Menu Isnt Working if I add Slideshow

HTML & CSS
1

Hello everybody,
I’ve been dealing with this for a long time and I can’t find a way to fix it…
I wanted to add a slideshow in a page , but when I do, it messes with the dropdown menu …
Any suggestions?

  <div class=".holly">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/insidestudio.jpg" alt="" width="970" height="337">
      </div>

      <div class="item">
        <img src="images/interior.jpg" alt="" width="600" height="337">
      </div>
    
      <div class="item">
        <img src="images/donor.jpg" alt="" width="600" height="337">
      </div>

      <div class="item">
        <img src="images/header_bg.jpg" alt="" width="600" height="337">
      </div>
    </div>

     </div>
  </div>
2

Hard to say without seeing a live example of the problem but it sounds like a z-index layering problem. That depends on what your meaning of “messes with” means.

If the dropdown is hiding behind the slideshow I would guess that you have some absolute positioning going on in the slideshow.

Positioned elements lower in the page source receive a higher stacking level when z-index is not applied.

1 Like
3

Indeed.as Ray.H said please provide us with a working example. Besides that in your example html you just show the carousel and nothing about the dropdown menu. If you don’t have a working example just profide the html and css involved

1 Like
4

It could also be that you are using the same classes in your menu as in the carousel (or one of the classes) and therefore have a conflict of interests.

As mentioned above we are all just guessing unless we can get the full picture :slight_smile:

1 Like
5

I just noticed a period at the beginning of your class declaration (above). Try removing it and see if that helps.

Like this:

But as the others have said, we would have to see your CSS code to know for sure what your issue is. There could be something in there as well.

3 Likes
6

@lolo has the problem been solved?
Looks OK to me from I can see using Vivaldi Windows

<div class="holly">
                         <div class="w3-content w3-section" style="max-width:700px">
                         <img class="mySlides" src="images/slides.jpg" style="width: 100%; display: none;">
  <img class="mySlides" src="images/insidestudio.jpg" style="width: 100%; display: none;">
   <img class="mySlides" src="images/slides1.jpg" style="width: 100%; display: none;">
  <img class="mySlides" src="images/slides4.jpg" style="width: 100%; display: none;">
    <img class="mySlides" src="images/slides5.jpg" style="width: 100%; display: none;">

  <img class="mySlides" src="images/slides2.jpg" style="width: 100%; display: block;">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 3000); // Change image every 2 seconds
}
</script>
</div>

342×512 112 KB

7

It’s working now…
I changed it for this and it works just fine:
Thank you to all!

<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
    
    <section class="work_area" id="WORK">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="work_title  wow fadeInUp animated">
                        <h1>Commemorative Tiles</h1>
                        <img src="images/shape.png" alt="">
                        <p>Ceramic pieces to commemorate events</p> <br>
                        
                        <div class="holly">
                         <div class="w3-content w3-section" style="max-width:700px">
                         <img class="mySlides" src="images/slides.jpg" style="width:100%">
  <img class="mySlides" src="images/insidestudio.jpg" style="width:100%">
   <img class="mySlides" src="images/slides1.jpg" style="width:100%">
  <img class="mySlides" src="images/slides4.jpg" style="width:100%">
    <img class="mySlides" src="images/slides5.jpg" style="width:100%">

  <img class="mySlides" src="images/slides2.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 3000); // Change image every 2 seconds
}
</script>
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.