我能够在这里找到使用BCSwipe看起来非常简单的解决方案:https://github.com/maaaaark/bcSwipe。
我按照指示操作,但是当我尝试实现它时,没有任何反应。
我正在使用并且仍然是ColdFusion的新手。但是,我想如果我执行以下操作来实现脚本,就像在BCSwipe说明中那样,我可以在手机上滑动旋转木马:
<cfscript>
$('.carouselSwipe').bcSwipe({ threshold: 50 });
</cfscript>
然而,它会抛出一个错误,即'$'无法识别,也不确定如何从那里开始。
以下是Bootstrap Carousel,我将'.carouselSwipe'放在:
$('.carouselSwipe').bcSwipe({ threshold: 50 });
<cffunction name="dspCarouselByFeedName" output="false">
<cfargument name="feedName" type="string" default="Slideshow" />
<cfargument name="showCaption" type="boolean" default="true" />
<cfargument name="cssID" type="string" default="myCarousel" />
<cfargument name="size" type="string" default="custom" hint="If you want to use a custom height/width, then use 'custom' ... otherwise, you can use 'small, medium, large' OR any other predefined custom image size 'name' you created via the back-end administrator." />
<cfargument name="width" type="numeric" default="1280" hint="width in pixels" />
<cfargument name="height" type="numeric" default="500" hint="height in pixels" />
<cfargument name="interval" type="any" default="5000" hint="Use either milliseconds OR use 'false' to NOT auto-advance to next slide." />
<cfargument name="autoStart" type="boolean" default="true" />
<cfargument name="showIndicators" type="boolean" default="true" />
<cfscript>
var local = {};
local.imageArgs = {};
if ( not ListFindNoCase('small,medium,large,custom', arguments.size) and variables.$.getBean('imageSize').loadBy(name=arguments.size,siteID=variables.$.event('siteID')).getIsNew() ) {
arguments.size = 'custom';
};
if ( not Len(Trim(arguments.size)) or LCase(arguments.size) eq 'custom' ) {
local.imageArgs.width = Val(arguments.width);
local.imageArgs.height = Val(arguments.height);
} else {
local.imageArgs.size = arguments.size;
};
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<!--- BEGIN: Bootstrap Carousel --->
<!--- IMPORTANT: This will only output items that have associated images --->
<cfset local.feed = variables.$.getBean('feed').loadBy(name=arguments.feedName)>
<cfset local.iterator = local.feed.getIterator()>
<cfif local.feed.getIsNew()>
<div class="container carouselSwipe">
<div class="alert alert-info alert-block">
<button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
<h4>Ooops!</h4>
The <strong>#HTMLEditFormat(arguments.feedName)#</strong> Content Collection/Local Index does not exist.
</div>
</div>
<cfelseif local.iterator.hasNext()>
<div id="#arguments.cssID#" class="carousel slide" data-interval="#arguments.interval#">
<!--- Indicators --->
<cfif arguments.showIndicators>
<ol class="carousel-indicators">
<cfset local.iterator.reset()>
<cfset local.idx = 0>
<cfloop condition="local.iterator.hasNext()">
<cfset local.item=iterator.next()>
<cfif ListFindNoCase('jpg,jpeg,gif,png', ListLast(local.item.getImageURL(), '.'))>
<li data-target="###arguments.cssID#" data-slide-to="#idx#" class="<cfif local.idx eq 0>active</cfif>"></li>
<cfset local.idx++>
</cfif>
</cfloop>
</ol>
</cfif>
<!--- Wrapper for slides --->
<div class="row carousel-inner">
<cfset local.iterator.reset()>
<cfset local.idx = 0>
<cfloop condition="local.iterator.hasNext()">
<cfset local.item=iterator.next()>
<cfif ListFindNoCase('jpg,jpeg,gif,png', ListLast(local.item.getImageURL(), '.'))>
<div class="row item<cfif local.idx eq 0> active</cfif>">
<img src="#local.item.getImageURL(argumentCollection=local.imageArgs)#" alt="#HTMLEditFormat(local.item.getTitle())#">
<cfif arguments.showCaption>
<div class="container">
<div class="carousel-caption">
<div>
<!--- <h3><a href="#local.item.getURL()#">#HTMLEditFormat(local.item.getTitle())#</a></h3> --->
<div class="visible-xs"><!---<h2>#HTMLEditFormat(local.item.getTitle())#</h2>---></div>
<div class="hidden-xs">#local.item.getSummary()#
<!--- #local.item.getBody()# --->
<!---<p><a class="btn btn-larg btn-primary" href="#local.item.getURL()#">Read More</a></p>--->
</div>
</div>
</div>
</div>
</cfif>
</div>
<cfset local.idx++>
</cfif>
</cfloop>
</div>
<cfif local.idx>
<!--- Controls --->
<cfif local.idx gt 1>
<a class="left carousel-control hidden-xs" href="###arguments.cssID#" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control hidden-xs" href="###arguments.cssID#" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<!--- AutoStart --->
<cfif arguments.autoStart>
<script>jQuery(document).ready(function($){$('###arguments.cssID#').carousel({interval:#arguments.interval#});});</script>
</cfif>
</cfif>
<cfelse>
<div class="alert alert-info alert-block">
<button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
<h4>Oh snap!</h4>
Your feed has no items <em>with images</em>.
</div>
</cfif>
</div>
<cfelse>
<div class="alert alert-info alert-block">
<button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
<h4>Heads up!</h4>
Your feed has no items.
</div>
</cfif>
<!--- // END: Bootstrap Carousel --->
</cfoutput></cfsavecontent>
<cfreturn local.str />
</cffunction>
任何帮助将不胜感激。感谢