asked on

Reference Error with plugin

Hi Experts,

I am trying to create my first plugin based on my instructor example, but I am getting:

21:47:35.003 ReferenceError: carousel is not defined 1 main.js:3:5

Open in new window

My index.html is

<!DOCTYPE html>
<!--
    COMP 9633 JavaScript Programming
    Assignment #1: Plugin - Carousel, to be used in the future aces-project.com
    Aleksandar Poposki, Student #100463295
-->
<html>
    <head>
        <title>Carousel Plugin</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="styles/carousel.css">
    </head>
    <body>
        <h1>Carousel Plugin</h1>
        <em>To be used in the future aces-project.com</em>
        
        <div id="divCarousel">
            
            <!--Custom Software START -->
            <div class="divSlide">
                <div class="divCarouselImgs">
                    <img src="images/custom-software.png" class="carouselImgs"/>
                </div>
                <div class="divCarouselDesc">
                    <h2>Custom Software</h2>
                    <ul>
                        <li>Software Point #1</li>
                        <li>Software Point #2</li>
                        <li>Software Point #3</li>
                    </ul>
                </div>
            </div>
            <!--Custom Software END-->
            
            <!--Custom Software START -->
            <div class="divSlide">
                <div class="divCarouselImgs">
                    <img src="images/web-design.png" class="carouselImgs"/>
                </div>
                <div class="divCarouselDesc">
                    <h2>Web Design</h2>
                    <ul>
                        <li>Web Design Point #1</li>
                        <li>Web Design Point #2</li>
                        <li>Web Design Point #3</li>
                    </ul>
                </div>
            </div>
            <!--Web Design END-->
            
        </div>
        
        <script
            src="http://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>

	<script src="js/carousel.js"></script>
	<script src="js/main.js"></script>
    </body>
</html>

Open in new window

My main.js

$(function() { //Document Ready
    
    carousel(createSlideData())
    
    //Use the following function Create Slides Info to pass in to plugin
    function createSlideData(){           
    
        var allSlides = array();
        var slide = [];

        //Create first slide
        slide['title'] = 'Custom Software';
        slide['description'] = '<ul> '
                            + '<li>Software Point #1</li>'
                            + '<li>Software Point #2</li>'
                            + '<li>Software Point #3</li>' 
                        +'</ul>';
        slide['image'] = 'images/custom-software.png';

        allSlides.push(slide);

        //Create 2nd Slide
        slide['title'] = 'Web Design';
        slide['description'] = '<ul> '
                            + '<li>Web Point #1</li>'
                            + '<li>Web Point #2</li>'
                            + '<li>Web Point #3</li>' 
                        +'</ul>';
        slide['image'] = 'images/web-design.png';

        allSlides.push(slide);

        //3rd Slide
        slide['title'] = 'Web Hosting';
        slide['description'] = '<ul> '
                            + '<li>Host Point #1</li>'
                            + '<li>Host Point #2</li>'
                            + '<li>Host Point #3</li>' 
                        +'</ul>';
        slide['image'] = 'images/web-hosting.jpg';

        allSlides.push(slide);

        //4th Slide
        slide['title'] = 'Networking & Technical Support';
        slide['description'] = '<ul> '
                            + '<li>Tech Point #1</li>'
                            + '<li>Tech Point #2</li>'
                            + '<li>Tech Point #3</li>' 
                        +'</ul>';
        slide['image'] = 'images/cstom-software.png';

        allSlides.push(slide);
        return  allSlides;
    }
    
});

Open in new window

carousel.js

$.fn.carousel = function(slides){
    console.log(slides);
}

Open in new window

Am I having scope issues because this is how I was told to define my plugin?

Any help will be greatly appreciated.

ASKER CERTIFIED SOLUTION

Jeet Kaushik

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial