我正在尝试编写一个名为grid2carousel的
JQuery插件,该插件在桌面设备上的Bootstrap样式网格中获取一些内容,并在较小的屏幕上成为旋转木马.
如果插件是页面上唯一的实例,但如果有多个插件则会遇到一些问题.我在这里创建了一个Codepen来演示这个问题：
http://codepen.io/decodedcreative/pen/BzdBpb
尝试注释掉codepen的HTML部分中的一个组件,调整浏览器的大小,直到它成为轮播,然后再次重复此过程并取消注释
每当浏览器宽度低于HTML中数据属性中指定的断点时,插件就会运行一个名为SetupPlugin的内部函数.如果浏览器宽度超过此断点,则称为DestroyPlugin的函数会将HTML恢复为其原始状态.像这样：
checkDeviceState = function(){
if($(window).width()>breakpointValue){
destroyPlugin();
}else{
if(!$element.hasClass('loaded')){
setupPlugin();
}
}
},
以下是我的插件代码.有人能给我一个关于我在这里做错了什么的指针吗？
(function (window,$){
$.grid2Carousel = function (node,options){
var
options = $.extend({slidesSelector: '.g2c-slides',buttonsSelector: '.g2c-controls .arrow'},{},options),$element = $(node),elementHeight = 0,$slides = $element.find(options.slidesSelector).children(),$buttons = $element.find(options.buttonsSelector),noOfItems = $element.children().length + 1,breakpoint = $element.data("bp"),breakpointValue = 0;
switch(breakpoint){
case "sm":
breakpointValue = 767;
break;
case "md":
breakpointValue = 991;
break;
case "lg":
breakpointValue = 1199;
break;
}
setupPlugin = function(){
// Add loaded CSS class to parent element which adds styles to turn grid layout into carousel layout
$element.addClass("loaded");
// Get the height of the tallest child element
elementHeight = getTallestInCollection($slides)
// As the carousel slides are stacked on top of each other with absolute positioning,the carousel doesn't have a height. Set its height using JS to the height of the tallest item;
$element.height(elementHeight);
// Add active class to the first slide
$slides.first().addClass('active');
$buttons.on("click",changeSlide);
},destroyPlugin = function(){
$element.removeClass("loaded");
$element.height("auto");
$buttons.off("click");
$slides.removeClass("active");
},checkDeviceState = function(){
if($(window).width()>breakpointValue){
destroyPlugin();
}else{
if(!$element.hasClass('loaded')){
setupPlugin();
}
}
},changeSlide = function(){
var $activeSlide = $slides.filter(".active"),$nextActive = null,prevSlideNo = $activeSlide.prev().index() + 1,nextSlideNo = $activeSlide.next().index() + 1;
if($(this).hasClass('left')){
if(prevSlideNo !== 0){
$nextActive = $activeSlide.prev();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}else{
$nextActive = $slides.last();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}
}else if($(this).hasClass('right')){
if(nextSlideNo !== 0){
$nextActive = $activeSlide.next();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}else{
$nextActive = $slides.first();
$nextActive.addClass('active');
$slides.filter(".active").not($nextActive).removeClass("active");
}
}
},getTallestInCollection = function(collection){
$(collection).each(function(){
if($(this).outerHeight() > elementHeight){
elementHeight = $(this).outerHeight();
}
});
return elementHeight;
};
setupPlugin();
checkDeviceState();
$(window).on("resize",checkDeviceState);
}
$.fn.grid2Carousel = function (options) {
this.each( function (index,node) {
$.grid2Carousel(node,options)
});
return this
}
})(window,jQuery);
非常感谢,
詹姆士
