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();
    });

});

update your code here jsfiddle.net/mohamedyousef1980/d0gqwp16/1 — Mohamed-Yousef
– Mohamed-Yousef, Commented Nov 21, 2015 at 3:21
The code above only has one slideshow. What is the code for multiple times on the same page? Are you getting any error in the console? — Alvaro Montoro
– Alvaro Montoro, Commented Nov 21, 2015 at 4:02

Tim Sheehan · Accepted Answer · 2015-11-21 04:47:21Z

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/

edited Nov 21, 2015 at 4:47

answered Nov 21, 2015 at 4:09

Tim Sheehan

4,0141 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mi-Creativity Over a year ago

or he can use a specific $('.specific-class').each(function(){...}); without doing the above

Tim Sheehan Over a year ago

@Mi-Creativity The difference between doing that and making a plugin is trivial since he'd need to change all his selectors either way.

Mi-Creativity Over a year ago

Indeed it is, but for bigenners - as he stated in the question - this would be a little more complex for him

Tim Sheehan Over a year ago

@Mi-Creativity the benefit of learning how to make a simple plugin early is not something that should be ignored, for a few extra lines of code it will give him a better understanding of jQuery and all the plugins he will inevitably be using. I've gone ahead and put a working version of the plugin with full commenting in to help him on his way.

azizmars Over a year ago

Thank you so much for your feedback and response! I appreciate the thoroughness! You've definitely cleared it up for me now! Have a great day!

|

Collectives™ on Stack Overflow

Issues using the same jQuery function multiple times

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related