修改后图像滑块不起作用

时间:2015-06-17 14:12:00

标签: javascript jquery css slider

我在这里找到了一个图像滑块并尝试修改我现有的滑块,我必须更像我找到的滑块。在修补它之后,即使工作也无法得到任何东西。

我创建了这个以显示我想要做的事情: https://jsfiddle.net/xeud0rw6/

我基于此... http://gualini.adostudio.it/realizations_2.html#

我添加了我的身份

#thumb

#big

试图修改它以使其工作,但我想我错过了一些东西。有谁看到我做错了什么?

2 个答案:

答案 0 :(得分:0)

请不要让我们让您的错误代码有效,这个问题对除了您自己以外的任何人都无济于事。我建议你接近插件的作者,或者至少指定你所说的插件。

答案 1 :(得分:0)

试试这个:

$(document).ready(function(){
        var realSlider= jQuery("#big ul").bxSlider({
            speed:1000,
            pager:false,
            nextText:'',
            prevText:'',
            infiniteLoop:false,
            hideControlOnEnd:true,
            onSlideBefore:function($slideElement, oldIndex, newIndex){
                changeRealThumb(realThumbSlider,newIndex);

            }

        });

        var realThumbSlider=jQuery("#big ul").bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 156,
          slideMargin: 12,
          moveSlides: 1,
          pager:false,
          speed:1000,
          infiniteLoop:false,
          hideControlOnEnd:true,
          nextText:'<span></span>',
            prevText:'<span></span>',
            onSlideBefore:function($slideElement, oldIndex, newIndex){
                /*jQuery("#thumb ul .active").removeClass("active");
                $slideElement.addClass("active"); */

            }
        });

        linkRealSliders(realSlider,realThumbSlider);

        if(jQuery("#thumb li").length<5){
            jQuery("#thumb .bx-next").hide();
        }




// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){

    jQuery("#thumb ul").on("click","a",function(event){
        event.preventDefault();
        var newIndex=jQuery(this).parent().attr("slideIndex");
        bigS.goToSlide(newIndex);
    });



}

//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){

    var $thumbS=jQuery("#thumb");
    $thumbS.find('.active').removeClass("active");
    $thumbS.find('li[slideIndex="'+newIndex+'"]').addClass("active");

    if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
    else slider.goToSlide(slider.getSlideCount()-4);

}
});