Issues using the same jQuery function multiple times

Question

Just starting out with FE web development. I've found this image viewer that I really like. Got it to work on my files. However, I'm having issues using the same image viewer multiple times in the same HTML file. Can anyone point me in the direction of what I'm doing wrong?

HTML:

<div id="slider">
    <h3>EventGlance UI Mock Ups</h3>
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
      <li><img src="images/1.jpg" height="568" width="320" /></li>
      <li><img src="images/2.jpg" height="568" width="320" /></li>
      <li><img src="images/3.jpg" height="568" width="320" /></li>
      <li><img src="images/4.jpg" height="568" width="320" /></li>
    </ul>  
</div>

JQuery/JS:

jQuery(document).ready(function ($) {
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        event.preventDefault(); 
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        event.preventDefault(); 
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

Answer 1

You won't be able to use multiple versions of this slider on the same page because it specifically targets #slider, ID's are unique and this will cause problems.

I would suggest using something like Owl Carousel which is extremely popular with 3500-ish stars on GitHub, you can easily set it up to target class names and will be much easier to do than rewrite your code into a plugin.

If you do want to use the existing code, your best bet would be to convert it into a plugin which will apply the code to all the elements you select, but you'll have to remove your references to #slider and do everything within the context of the elements your looping over.

---

An example of how to roll this into a plugin would be this:

(function( $ ) {

    // Your slider plugin, $(selector).slider();
    $.fn.slider = function() {

        // Rather than target a single element, this will take one
        // or more results from your selector and loop over it
        return this.each(function() {

            // $self will now be the equivalent of #slider
            // in your demo code, everything else selected
            // will use it as context
            var $self = $(this),
                $list = $self.find('ul'),
                $listItems = $list.find('li'),

                // Your original variables
                slideCount = $listItems.length,
                slideWidth = $listItems.width(),
                slideHeight = $listItems.height(),
                sliderUlWidth = slideCount * slideWidth;

            // $self now references .slider
            $self.css({ width: slideWidth, height: slideHeight });

            // $list now references .slider > ul
            $list.css({ width: sliderUlWidth, left: 0 });

            // .find is quicker than context, use $list to find
            // last child
            $list.find('li:last-child').prependTo( $list );

            // No need for functions as there's no re-use going on,
            // also in your demo event.preventDefault did nothing
            $self.find('a.control_prev').on('click', function (e) {
                e.preventDefault(); 
                $list.animate({
                    left: + slideWidth
                }, 200, function () {
                    $list.find('li:last-child').prependTo( $list );
                    $list.css('left', '');
                });
            });

            // Once again, no need for function especially when you
            // weren't passing your event object through anyway
            $self.find('a.control_next').on('click', function (e) {
                e.preventDefault(); 
                $list.animate({
                    left: - slideWidth
                }, 200, function () {
                    $list.find('li:first-child').appendTo( $list );
                    $list.css('left', '');
                });
            });
        });

    };

}( jQuery ));

// Usage example:
$( ".slider" ).slider();

---

I've gone ahead and built a basic plugin for you with some demo HTML and CSS (I'm assuming you had styling applied that you didn't include in your demo). You can check out the jsfiddle here:

https://jsfiddle.net/71j5psr0/31/