Question

我正在使用idangerous swiper.js进行菜单显示我的要求是将菜单上点击的elemnet移动到菜单的中心。

我可以使用此

来实现这个目标

$(document).on("click", ".swiper-slide", function() {
  var str = $(this).text();
  var str2 = $("#center").text();
  $(this).removeClass('swiper-slide-active');
  $('.swiper-slide').removeClass('swiper-slide-active');
  $(this).children().text(str2);
  $("#center").children().text(str);
  $("#center").addClass('swiper-slide-active');
  var menuclickedelement = $("#center").children().text();
});


var T1categories = ["ONE", "TWO", "THREE" , "FOUR" , "FIVE"];
createhorizontaltab(T1categories);
function createhorizontaltab(categories) {
  var categoryArr = categories;
  var favoriteresultag = '';
  var centervalue = Math.floor(categoryArr.length / 2);
  for (var i = 0; i < categoryArr.length; i++) {
    if (i != centervalue) {
      favoriteresultag += '<div class="swiper-slide"><span>' + categoryArr[i] + '</span></div>';
    } else {
      favoriteresultag += '<div class="swiper-slide" id="center"><span>' + categoryArr[i] + '</span></div>';
    }
  }
  $("#swipecontainer").append(favoriteresultag).trigger("create");
  $("#swipecontainer .swiper-slide").eq(centervalue).trigger("click");

  // callmenuInit();  
}

此代码仅在评论 callmenuInit（）时有效;

如果我取消注释此代码，则无效。

你可以告诉我如何解决这个问题

http://jsfiddle.net/nx33jez6/1/

请原谅这个问题与jquery无关。

这是我的callmenuinit

  function callmenuInit() {
        //Init Navigation
        var nav = $('.swiper-nav').swiper({
                slidesPerView: 'auto',
                freeMode: true,
                freeModeFluid: true,
                onSlideClick: function(nav) {
                    pages.swipeTo(nav.clickedSlideIndex)
                }
            })
            //Function to Fix Pages Height
        function fixPagesHeight() {
            $('.swiper-pages').css({
                height: $(window).height() - nav.height

            })
        }
        $(window).on('resize', function() {
            fixPagesHeight()
        })
        fixPagesHeight();
            //Init Pages
        var pages = $('.swiper-pages').swiper()
            //Scroll Containers
        $('.scroll-container').each(function() {
                $(this).swiper({
                    mode: 'vertical',
                    scrollContainer: true,
                    mousewheelControl: true,
                    scrollbar: {
                        container: $(this).find('.swiper-scrollbar')[0]
                    }
                })
            })
            //Gallery
        var swiperGallery = $('.swiper-gallery').swiper({
            mode: 'vertical',
            slidesPerView: 'auto',
            freeMode: true,
            freeModeFluid: true,
            scrollbar: {
                container: $('.swiper-gallery .swiper-scrollbar')[0]
            }
        })
        swiperGallery.reInit()
    }

Answer 1

1）

$(this).find('.swiper-scrollbar')[0]未定义。评论<div class="swiper-scrollbar"></div>，因此我对其进行了注释。

2）

Swiper API表示scrollbar选项是String或HTML元素。但是你将它设置为一个对象。它应该像scrollbar: $(this).find('.swiper-scrollbar')[0]

3）

没有.swiper-gallery元素，因此var swiperGallery = $('.swiper-gallery').swiper({无法初始化。

所以现在只有TypeError: swiperGallery is undefined例外。

http://jsfiddle.net/nx33jez6/2/

修改swiper初始化代码

1 个答案: