Jquery 相机幻灯片自定义字幕显示

最近，我在我的项目中创建了Camers幻灯片。所有功能都工作正常。但是，我希望以固定的高度和宽度显示幻灯片div之外的标题。请帮帮我。下面是我的代码

<script type="text/javascript">
    jQuery(function () {
        jQuery('#camera_wrap_3').camera({
            height: '56%',
            hover: true,
            time: 1000,
            fx: 'scrollLeft',
            pagination: false,
            thumbnails: true,
            imagePath: '../images/'
        });

    });
</script>

<div class="fluid_container">
        <p>Videos, HTML elements and data- attributes</p>
        <div class="camera_wrap camera_emboss" id="camera_wrap_3" style="height: 180px !important;">
            <div data-thumb="AutoSlider/Images/big_bunny_fake.jpg" data-src="AutoSlider/Images/SmallThumbs/big_bunny_fake.jpg">
                <div style="position: absolute; top: 5%; left: 5%; background: #000; color: #fff; padding: 5px; width: 25%" class="fadeIn camera_effected">
                    Content1
                </div>
            </div>
            <div data-thumb="AutoSlider/Images/leaf.jpg" data-src="AutoSlider/Images/SmallThumbs/leaf.jpg">
                <div style="position: absolute; top: 5%; left: 5%; background: #000; color: #fff; padding: 5px; width: 25%" class="fadeIn camera_effected">
                    Content2
                </div>
            </div>
            <div data-thumb="AutoSlider/Images/road.jpg" data-src="AutoSlider/Images/SmallThumbs/road.jpg" data-time="1500" data-trasperiod="4000" data-link="http://www.google.com/" data-target="_blank">
                <div class="camera_caption fadeFromBottom">
                    Content3

                </div>
            </div>
        </div>
    </div>

jQuery（函数（）{
jQuery（'#camera_wrap_3'）。camera({
身高：56%，
哈弗：没错，
时间：1000，
fx:'向左滚动'，
分页：false，
缩略图：没错，
图像路径：'../images/'
});
});
视频、HTML元素和数据属性

内容1
内容2
内容3

我知道我来晚了一点，但是

因为这个插件没有现成的方法，所以每次幻灯片更改时，您都可以在div中更改内容

根据：

由于Camera 1.3.0，您可以通过以下方式获取当前滑块的索引： 以这种方式使用回调：

onLoaded: function(){
  var ind = t.find('.camera_target .cameraSlide.cameranext').index();
}

在

onLoaded

或

onStartTransition

功能中，您可以根据刚刚转换到的幻灯片，设置已定位在页面上任何位置的div文本

我创建了一个示例来演示如何执行类似的操作，但是

基本上，代码逻辑如下所示：

$('#camera_wrap_3').camera({

    // camera setup here

    onLoaded: function(){
      var slide = $('.camera_target .cameraSlide.cameranext').index();
        if(slide == 1){
            $('#textbox').text('1980');
        } else if (slide == 2){
            $('#textbox').text('2008');
        } else if(slide == 3) {
            $('#textbox').text('2009');
        }
    }        
});

希望这能帮助将来偶然发现这一点的人

更好地使用

jQuery('.camera_target .cameraSlide.cameracurrent').index()

要使用ONEDTransition获取当前索引，请执行以下操作：

我在使用上有很多困难

jQuery('.camera_target .cameraSlide.cameranext').index()

---

因为它的计算方式不对

拉小提琴。这样更容易理解。给你！