简体   繁体   English

Bootstrap Carousel:将jQuery幻灯片更改为Bootstrap Caroulsel并绑定幻灯片功能

[英]Bootstrap carousel: changing jquery slides to bootstrap caroulsel and binding a slide function

I started applying the bootstrap on my site. 我开始在我的网站上应用引导程序。 I need to change this following script to work on bootstrap carousel 我需要更改以下脚本以在引导轮播上工作

        $(function(){
            // Set starting slide to 1
            var startSlide = 1;
            // Get slide number if it exists
            if (window.location.hash) {
                alert('hash'+window.location.hash);
                startSlide = window.location.hash.replace('#','');
                alert('startslide'+startSlide);
            }
            // Initialize Slides
            $('#slides2').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                generatePagination: true,
                play: 0,
                pause: 2500, 
                hoverPause: true,
                currentClass: 'current',
                // Get the starting slide
                start: {$startNumb},
                animationComplete: function(current){
                    // Set the slide number as a hash
                    window.location.hash = '#' + current;
                    alert('windows hash'+window.location.hash);
                    alert('current'+current);
                    $('#activeSlideIndex').val(current);
                    $('#popLightbox div.rating a').attr('rel', imageIdArray[current-1] +';media');
                    $('#popLightbox a.voteNegative').html('<img src="{$liveSite}/templates/{$theme}/desktop_images/images/unlike.png" align="absmiddle"><b class="sprite">&nbsp;</b> ' + voteCountArray[current-1][0]);
                    $('#popLightbox a.votePlus').html('<img src="{$liveSite}/templates/{$theme}/desktop_images/images/approve.png" align="absmiddle"><b class="sprite">&nbsp;</b> ' + voteCountArray[current-1][1]);
                }
            });

I've tried something like this but it is not working. 我已经尝试过类似的方法,但是它不起作用。 I don't know where is that current variable getting its value and how window.location.hash work 我不知道current变量在哪里获取其值以及window.location.hash如何工作

    $(function(){
        // Set starting slide to 1  
        var startSlide = 1;
        // Get slide number if it exists
        if (window.location.hash) {
            startSlide = window.location.hash.replace('#','');
        }
        $('#myCarousel').bind('slide',function(current){ 
            window.location.hash = '#' + current;
            $('#activeSlideIndex').val(current);
            $('#popLightbox div.rating a').attr('rel', imageIdArray[current-1] +';media');
            $('#popLightbox a.voteNegative').html('<img src="{$liveSite}/templates/{$theme}/desktop_images/images/unlike.png" align="absmiddle"><b class="sprite">&nbsp;</b> ' + voteCountArray[current-1][0]);
            $('#popLightbox a.votePlus').html('<img src="{$liveSite}/templates/{$theme}/desktop_images/images/approve.png" align="absmiddle"><b class="sprite">&nbsp;</b> ' + voteCountArray[current-1][1]);
    });     

    }); 

found a solution.This one gets the current index of the carousel 找到了解决方案。此解决方案获取轮播的当前索引

$('#myCarousel').bind('slid',function(e){  
            var current =  $(".active", e.target).index()+1;   
                $('#activeSlideIndex').val(current);
                $('#popLightbox div.rating a').attr('rel', imageIdArray[current-1] +';media');
                $('#popLightbox a.voteNegative').html('<img src="{$liveSite}/templates/{$theme}/desktop_images/images/unlike.png" align="absmiddle"><b class="sprite">&nbsp;</b> ' + voteCountArray[current-1][0]);
                $('#popLightbox a.votePlus').html('<img src="{$liveSite}/templates/{$theme}/desktop_images/images/approve.png" align="absmiddle"><b class="sprite">&nbsp;</b> ' + voteCountArray[current-1][1]);
        });  

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM