jQuery carousel plugin from scratch

Question

Description: I need to build a jQuery/javascript carousel plugin from scratch. The carrousel functionality will be called by an extended jQuery function ($.fn) I will call carrousel() or something of the sort. Depending on how I build the method it would be applied to either the div containing the pictures that will make the carousel or to the arrows (or whatever the developer defines as "prev", "next" buttons) that move the carousel. The same carrousel() method will be called whatever users clicks "previous" or "next" and my code will decide whether it should slide the pictures to the right or to the left depending on which the user clicked.

I am using the data object to store the images and keep everything wrapped in the same object.

Problem: This plugin needs to work regardless of the number of carousels I have on my page (I have three). I am using jQuery .each to loop through the arrows that will have the carrousel and when users click on that arrow I need to get that specific object using either $(this) or this and move the images in the parent div accordingly. For some reason, the click event on $(this) does not work. When I click the arrows I cannot see anything in console (see code below).

On a second version, I am looping through the divs that have the images, getting the arrows inside those divs, and trying to do something with the arrows. This also doesn't work.

Question: how do I get each individual arrow on the collection of arrows I have and do stuff when they are clicked? (I believe I am not using $(this) correctly).

Note: The divs with the pictures have a data-images attribute containing the images. Note: The arrows are the img tags with data-direcion attributes (previous or next)

Here is the code I have so far:

HTML

<article class="resources">
        <section class="resources_headings">
            <div>
                <h2>2/ Resources</h2>
            </div>
            <div>
                <h4>Our Physicians have the latest tools at their fingertips.</h4>
            </div>  
        </section>
        <section class="innovator">
            <div>
                <h3>Innovator</h3>
                <p>Nullam accumsan lorem in dui. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Quisque malesuada placerat nisl</p>
            </div>
            <div data-images='["images/resources/innovator_s.jpg","images/resources/results_s.jpg","images/resources/tests_s.jpg","images/resources/lab_s.jpg"]' class="innovator_wrapper slider">
                <img data-direction="previous" src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources innovator_previous mobile direction">
                <img data-direction="next" src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources innovator_next mobile direction">
                <img src="images/resources/innovator_s.jpg" alt="innovator" class="resources_images innovator">
                <div id="caption_overlay">
                    <span>New technologies</span><img src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources innovator_previous"><img src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources innovator_next">
                </div>
            </div>
        </section>
        <section class="facilities">
            <div>
                <h3>Facilities</h3>
                <p>Nullam accumsan lorem in dui. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Quisque malesuada placerat nisl. Et, hendrerit quis, nisi. Quisque malesuada placerat nisl.</p>
            </div>
            <div data-images='["images/resources/lab_s.jpg","images/resources/innovator_s.jpg","images/resources/results_s.jpg","images/resources/tests_s.jpg", "images/resources/physicians_s.jpg"]' class="facilities_wrapper slider">
                <img data-direction="previous" src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources facilities_previous mobile direction"><img data-direction="next" src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources facilities_next mobile direction">
                <img src="images/resources/hallway_s.jpg" alt="hallway" class="resources_images facilities">
                <div id="caption_overlay">
                    <span>World Class Facilities</span><img src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources facilities_previous"><img src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources facilities_next">
                </div>
            </div>
        </section>
        <section class="simulation">
            <div>
                <h3>Training Simulation</h3>
                <p>Tempus non, auctor et, hendrerit quis, nisi. Quisque malesuada placerat nisl. Nullam accumsan lorem in dui. Phasellus leo dolor, nullam accumsan</p>
            </div>
            <div data-images='["images/resources/innovator_s.jpg","images/resources/lab_s.jpg", "images/resources/results_s.jpg","images/resources/tests_s.jpg"]' class="simulation_wrapper slider">
                <img data-direction="previous" src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources simulation_previous mobile direction"><img data-direction="next" src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources simulation_next mobile direction">
                <img src="images/resources/lab_s.jpg" alt="lab" class="resources_images simulation">
                <div id="caption_overlay">
                    <span>Real Life Simulations</span><img src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources simulation_previous"><img src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources simulation_next">
                </div>
            </div>
        </section>
    </article>

jQuery version 1: loop through the arrows ('img.direction') and get $(this) when it is clicked (not using the $fn here for clarity):

$(function() {
  $('img.direction').each(function(){
    var self = $(this);//returns the objects for the 6 arrows
    console.log(self);//works fine

    //get the slider directions (previous or next)
    var directions = $(this).data('direction');//works fine

   $(this).on('click', function(){ //this doesn't work
        console.log('directions');//nothing shows on the console when I click the arrows
    });

    //get images in each div
    var slideContainer = $(this).closest('.slider').data('images');//this works
    console.log(slideContainer);//this works
});

});

jQuery version 2: loop through the divs (.slider) that have the pictures, get the arrows inside that div, use $(this) to get the data-direction, and do move the images depending on the direction:

$(function() {
  $('.slider').each(function(){
    //get images in each div
    var images = $(this).data('images');//works
    console.log(images.length);

    //get the slider controllers (direction arrows)
    var directions = $(this).find('img.direction');//works
    console.log(directions);

        //loop through all arrows and get them by index
        directions.each(function(index){
            // console.log(directions[index]);

            $(this).on('click',function(){//doesn't work
                var direction = $(this).data('direction');
                console.log('direction');
                if(direction==='next'){
                    console.log('next');
                }
                else{
                    console.log('previous');
                }
            });

        });
    });
});

THANKS A LOT!

Answer 1

How about something like this:

$(".slider .direction").click(function(){
    var direction = $(this).data("direction");
    var images = $(this).parent().data("images");
    console.log(direction, images);
});

Somewhat working Fiddle (no images): http://jsfiddle.net/alan0xd7/40optfdw/