'createMarqueeは定義されていません'というエラーを解決するには？

Question

私はこれをニュースティッカーのために使用しようとしています。Simple Marquee plugin私はドキュメンテーションとしてすべてをしました。しかし、まだ私は、 "キャッチされていないReferenceError：createMarqueeは定義されていません"というエラーが表示されます。なぜこのエラーが発生するのですか？これを解決するには？

$(function(){ 
 
    createMarquee(); 
 
});

.container { 
 
    width: 100%; 
 
    background: #4FC2E5; 
 
    float: left; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    height: 45px; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.marquee-sibling { 
 
    padding: 0; 
 
    background: #3BB0D6; 
 
    width: 20%; 
 
    height: 45px; 
 
    line-height: 42px; 
 
    font-size: 12px; 
 
    font-weight: normal; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    float: left; 
 
    left: 0; 
 
    z-index: 2000; 
 
} 
 

 
.marquee, 
 
*[class^="marquee"] { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    position: absolute; 
 
} 
 

 
.marquee { margin-left: 25%; } 
 

 
.marquee-content-items { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin: 0; 
 
    height: 45px; 
 
    position: relative; 
 
} 
 

 
.marquee-content-items li { 
 
    display: inline-block; 
 
    line-height: 35px; 
 
    color: #fff; 
 
} 
 

 
.marquee-content-items li:after { 
 
    content: "|"; 
 
    margin: 0 1em; 
 
}

<div class="container"> 
 
    <div class="marquee-sibling"> Breaking News </div> 
 
    <div class="marquee"> 
 
    <ul class="marquee-content-items"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     <li>Item 5</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 
 
<script src="https://rawgit.com/conradfeyt/Simple-Marquee/master/js/marquee.js"></script>

Answer 1

あなたはgithubのから使用しているバージョンは、あなたがリンクされ、デモと同じバージョンではありません。このプラグインに必要なHTMLとCSSも変更されていることに注意してください

$('.simple-marquee-container').SimpleMarquee();

：

は今、あなたは、このようプラグインを呼び出す必要があります。

$(function(){ 
 
    $('.simple-marquee-container').SimpleMarquee(); 
 
});

.simple-marquee-container *{ 
 
\t -webkit-box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t -o-box-sizing:border-box; 
 
\t box-sizing:border-box; 
 
\t font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; 
 
} 
 
.simple-marquee-container { 
 
\t width: 100%; 
 
\t background: grey; 
 
\t float: left; 
 
\t display: inline-block; 
 
\t overflow: hidden; 
 
\t box-sizing: border-box; 
 
\t height: 45px; 
 
\t position: relative; 
 
\t cursor: pointer; 
 
} 
 

 
.simple-marquee-container .marquee-sibling { 
 
\t padding: 0; 
 
\t background: rgb(61, 61, 61); 
 
\t width: 20%; 
 
\t height: 45px; 
 
\t line-height: 42px; 
 
\t font-size: 12px; 
 
\t font-weight: normal; 
 
\t color: #ffffff; 
 
\t text-align: center; 
 
\t float: left; 
 
\t left: 0; 
 
\t z-index: 2000; 
 
} 
 

 
.simple-marquee-container .marquee, .simple-marquee-container *[class^="marquee"] { 
 
\t display: inline-block; 
 
\t white-space: nowrap; 
 
\t position:absolute; 
 
} 
 

 
.simple-marquee-container .marquee{ 
 
    margin-left: 25%; 
 
} 
 

 
.simple-marquee-container .marquee-content-items{ 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin: 0; 
 
    height: 45px; 
 
    position: relative; 
 
} 
 

 
.simple-marquee-container .marquee-content-items li{ 
 
    display: inline-block; 
 
    line-height: 35px; 
 
    color: #fff; 
 
} 
 

 
.simple-marquee-container .marquee-content-items li:after{ 
 
\t content: "|"; 
 
\t margin: 0 1em; 
 
}

<div class="simple-marquee-container"> 
 
\t <div class="marquee-sibling"> 
 
\t \t I am here to iritate you 
 
\t </div> 
 
\t <div class="marquee"> 
 
\t \t <ul class="marquee-content-items"> 
 
\t \t \t <li>Item 1</li> 
 
\t \t \t <li>Item 2</li> 
 
\t \t \t <li>Item 3</li> 
 
\t \t \t <li>Item 4</li> 
 
\t \t \t <li>Item 5</li> 
 
\t \t </ul> 
 
\t </div> 
 
</div> 
 
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 
 
<script src="https://rawgit.com/conradfeyt/Simple-Marquee/master/js/marquee.js"></script>