CODEWITHSUNDEEP
javascripthtmlcssslidercarousel
RianneJ
RianneJ

Reputation: 163

Button on Slider Not responsive

I am creating a website and would like to use this ready made slider on my page. I have added it to my code, however, the left button does not work. The right button works but the hover disappears on mobile view.

I am new to web development and therefore still learning. If someone could help that would be much appreciated. The CodePen for this slider is https://codepen.io/bryan-erwin/pen/dJEYVr

<header>
<div class="container" id="container">
  <div class="caption" id="slider-caption">
    <div class="caption-heading">
      <h1>Example</h1>
    </div>
    <div class="caption-subhead"><span></span></div><a class="btn" 
href="#"></a>
  </div>
  <div class="left-col" id="left-col">
    <div id="left-slider"></div>
  </div>
  <ul class="nav">
    <li class="slide-up">
      <a id="up_botton" href="#"><</a>
    </li>
    <li class="slide-down">
          <a id="down_button" href="#">></a>
        </li>
  </ul>
 </div>
 </header>

I would like the left button to go to the previous slide and the right button hover to work on all views

Upvotes: 0

Views: 214

Answers (1)

Kulshreshth K
Kulshreshth K

Reputation: 1176

Your javascript code is incomplete you are listening to the right side button click event by this code:

let down_button = document.getElementById('down_button');

down_button.addEventListener('click',function(e){
  e.preventDefault();
  clearInterval(autoplay);
  nextSlide();
  autoplay;
});

you have to add code for the left side button also like this:

let up_button = document.getElementById('up_button');

up_button.addEventListener('click',function(e){
  e.preventDefault();
  clearInterval(autoplay);
  prevSlide(); // you have to create this function
  autoplay;
});

for this, you have to also add an id="up_button" to the left side button.

Upvotes: 2

Related Questions