How to Add Prev & Next Buttons


#1

The code I am having problem with is here codepen.io/Meocross/pen/Xjzaod
I was wondering how do I make .btnleft and .btnright act like "prev" and "next" buttons for the mySlides slideshow. When you click both of the buttons they only go one way and that is forward.


#2

you can find online how to make a carousel?

here is a huge problem:

$(".btnleft").onclick = function() {
      carousel();
            
      
      
      
}

onclick is an attribute for html:

<input type="button" text="click me" onclick="myFunction()">

you need click, the jquery event:

$(".btnleft").click(function(){
   # do something
})

see? the syntax is different. This is jquery, so i hope you included jquery.


#3

I have checked many carousel codes on google, but many are overly complex and I can't tell when the prev and next buttons connect. I think the key relies on slideIndex but I can't seem to turn it into the negative for .btnleft.


#4

She did, and maybe a little more than necessary. I would remove these if they are not absolutely needed:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

#5

Considering that jQuery is present, we may as well use it...

    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }

could be rewritten as,

    var $x = $('.mySlides');

This only needs to be read at runtime. The node collection object will be static in memory. I use $x to indicate a jQuery object. We may refer to this object repeatedly without querying the class ever again.

Now when we wish to reset the elements,

    $x.css('display', 'none');

#6

@meomix, I'd encourage you to take a look at my CodePen Collection where I've tackled this challenge, creating a media slider, or carousel, from scratch. I broke my process up over several stages, and faced each feature with a fresh start where I figured out how it should work. You'd immediately benefit from the first to stages, though the latter ones will show how to add features to your slider, and you will learn how to refactor your code.

My CodePen collection of each stage is here .

I've also written a post on my blog at blog post on my site. Not perfectly written but provides more guidance through the process if you prefer that.

My process will show you how to build an incrementer, affix a title section to your slider, make your slider "container" adjust to your contents dimensions (if you want that) and integrate radio buttons. Over the course of the collection you'll also see how the code is refactored.


#7

Here is a simple solution that gets the directions working.

function main(){
  var $slides = $('.mySlides');
  var lastSlide = $slides.length - 1;
  var slideIndex = 0;
  carousel();
  $(".btnleft").click(function() {
    if (slideIndex === 0) {
      slideIndex = lastSlide;
    } else {
      slideIndex--;
    }
    carousel();
  });      
  $(".btnright").click(function() {
    if (slideIndex === lastSlide) {
      slideIndex = 0;
    } else {
      slideIndex++;
    }
    carousel();
  });
  function carousel() {
    $slides.hide().eq(slideIndex).show();
  }
}
$(document).ready(main);

#8

Thanks a lot mtf! you really solved my problem, I guess I have to study javascript a lot more to know this by heart.
And sure emgo_dev I'll look through your courses, better to know how to do it so that I don't ask this question again.


#9

You're welcome! Good luck with your project.

along with jQuery. I recommend get well versed in vanilla JS and pick up jQuery a little as you go, but only after you have completed the units on Objects (basically finish the JS track).

jQuery is a library that interconnects the entire DOM through the three main API's built in to the browser: HTML, CSS and JS. It uses CSS selectors, JavaScript constructors (classes), abstract object methods and HTML DOM tree nodes. We can do all this in JavaScript, but not with quite the ease we can in jQuery since it has done a lot of the grunt work for us. Only when we understand JS do we get this complete picture and are able to take full advantage of it.