javascript - Object[object Object] has no method 'slitslider' -
i getting error 'object[object object] has no method 'slitslider' when trying implement slider on page. don't know quite of javascript don't know why happening.
this script:
<script type="text/javascript"> $(function() { var page = (function() { var $nav = $( '#nav-dots > span' ), slitslider = $( '#slider' ).slitslider( { onbeforechange : function( slide, pos ) { $nav.removeclass( 'nav-dot-current' ); $nav.eq( pos ).addclass( 'nav-dot-current' ); } } ), init = function() { initevents(); }, initevents = function() { $nav.each( function( ) { $( ).on( 'click', function( event ) { var $dot = $( ); if( !slitslider.isactive() ) { $nav.removeclass( 'nav-dot-current' ); $dot.addclass( 'nav-dot-current' ); } slitslider.jump( + 1 ); return false; } ); } ); }; return { init : init }; })(); page.init(); /** * notes: * * example how add items: */ /* var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>margi clarke</cite></blockquote></div></div>'); // call plugin's add method ss.add($items); */ }); </script> i guess has other jquery files loaded i'm not sure how solve it. generated html:
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.ba-cond.min.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.slitslider.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap.min.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> update
html:
<div class="container demo-2"> <header class="clearfix"> <h1>slit slider <span>with css3 , jquery</span></h1> </header> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2"> <div class="sl-slide-inner"> <div class="bg-img bg-img-1"></div> <h2>a bene placito.</h2> <blockquote><p>you have dined, , scrupulously slaughterhouse concealed in graceful distance of miles, there complicity.</p><cite>ralph waldo emerson</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5"> <div class="sl-slide-inner"> <div class="bg-img bg-img-2"></div> <h2>regula aurea.</h2> <blockquote><p>until extends circle of compassion living things, man not himself find peace.</p><cite>albert schweitzer</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="bg-img bg-img-3"></div> <h2>dum spiro, spero.</h2> <blockquote><p>thousands of people 'love' animals sit down once or twice day enjoy flesh of creatures have been utterly deprived of make lives worth living , endured awful suffering , terror of abattoirs.</p><cite>dame jane morris goodall</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="bg-img bg-img-4"></div> <h2>donna nobis pacem.</h2> <blockquote><p>the human body has no more need cows' milk dogs' milk, horses' milk, or giraffes' milk.</p><cite>michael klaper m.d.</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="bg-img bg-img-5"></div> <h2>acta non verba.</h2> <blockquote><p>i think if want eat more meat should kill , eat raw not blinded hypocrisy of having processed you.</p><cite>margi clarke</cite></blockquote> </div> </div> </div><!-- /sl-slider --> <nav id="nav-dots" class="nav-dots"> <span class="nav-dot-current"></span> <span></span> <span></span> <span></span> <span></span> </nav> </div><!-- /slider-wrapper --> <div class="content-wrapper"> <h2>about slider</h2> <p>the slit slider slideshow twist: idea slice open current slide when navigating next or previous one. using jquery , css animations can create unique slide transitions content elements. </p> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { var page = (function() { var $nav = $( '#nav-dots > span' ), slitslider = $( '#slider' ).slitslider( { onbeforechange : function( slide, pos ) { $nav.removeclass( 'nav-dot-current' ); $nav.eq( pos ).addclass( 'nav-dot-current' ); } } ), init = function() { initevents(); }, initevents = function() { $nav.each( function( ) { $( ).on( 'click', function( event ) { var $dot = $( ); if( !slitslider.isactive() ) { $nav.removeclass( 'nav-dot-current' ); $dot.addclass( 'nav-dot-current' ); } slitslider.jump( + 1 ); return false; } ); } ); }; return { init : init }; })(); page.init(); /** * notes: * * example how add items: */ /* var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>margi clarke</cite></blockquote></div></div>'); // call plugin's add method ss.add($items); */ }); </script>
Comments
Post a Comment