将标题添加到现有图像滑块

Question

我尝试使用“ figure”和“ figcaption”将标题添加到图像滑块，并为其提供样式，但它只会创建一个新幻灯片。 有没有一种方法可以添加标题，如下图所示。 有7个带有7个不同标题的图像。

我的滑块

ASPX

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="JS/jquery.cycle.all.js"></script>
    <link href="CSS/style.css" rel="stylesheet" />
    <script>
        $(document).ready(function () {
            $('#slider1').cycle({
                fx: 'scrollHorz',
                speed: 'slow',
                timeout: 0,
                next: '#next',
                prev: '#prev',
                pager: '#thumb',
                pagerAnchorBuilder: function (idx, slide) {
                    return '<li><a href="#"><img src="' + slide.src + '" width="60" height="60" /></a></li>';
                }
            });
        });

        function changeSlide() {
            $('#next').trigger('click');
            setTimeout(changeSlide, 3000);
        }

        setTimeout(changeSlide, 3000);

        $(function () { setCurrentTab('tab1'); });

    </script>

    <section>
        <div class="container">

            <div class="slider">
                <div id="slider1">
                    <img border="0" src="Slider/B50.JPG" width="850" height="637" />
                    <img border="0" src="Slider/B51.JPG" width="850" height="637" />
                    <img border="0" src="Slider/C47.JPG" width="850" height="637" />
                    <img border="0" src="Slider/C43.JPG" width="850" height="637" />
                    <img border="0" src="Slider/E2.JPG" width="850" height="637" />
                    <img border="0" src="Slider/W5.JPG" width="850" height="637" />
                    <img border="0" src="Slider/M21.JPG" width="850" height="637" />
                </div>
                <ul id="thumb"></ul>
                <div id='next' class="slider_next">
                    <img border="0" src="Images/next.png" width="57" height="57" alt="next image" /></div>
                <div id='prev' class="slider_prev">
                    <img border="0" src="Images/prev.png" width="57" height="57" alt="previous image" /></div>
            </div>
        </div>
    </section>

样式

.slider {
    margin: 0 auto;
    width: 850px;
    height: 637px;
    border: 8px solid #FFFFFF;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #333333;
    position: relative;
}

.slider_next {
    width: 62px;
    height: 62px;
    background: #f8f8f8;
    border-radius: 70px;
    position: absolute;
    z-index: 99;
    top: 287px;
    left: 820px;
    padding: 5px 0 0 5px;
    cursor: pointer;
}

.slider_prev {
    width: 62px;
    height: 62px;
    background: #f8f8f8;
    border-radius: 70px;
    position: absolute;
    z-index: 99;
    top: 287px;
    left: -35px;
    padding: 5px 0 0 5px;
    cursor: pointer;
}

#thumb {
    width: 100%;
    height: 80px;
    margin: 20px 14%;
}

    #thumb li {
        width: 60px;
        float: left;
        margin: 12px;
        list-style: none;
    }

    #thumb a {
        width: 60px;
        padding: 3px;
        display: block;
        border: 3px solid #FFFFFF;
        border-radius: 3px;
        box-shadow: 1px 1px 3px #333333;
    }

    #thumb li.activeSlide a {
        border: 3px solid #0a526f;
        border-radius: 3px;
        box-shadow: 1px 1px 3px #333333;
    }

    #thumb a:focus {
        outline: none;
    }

    #thumb img {
        border: none;
        display: block;
    }

Answer 1

我之前做过的方法是将html中的图像作为背景图像而不是<img>标签。

看看例子

CSS

.main-image {
    background-image:url("image.jpg");
    height: 300px;
    background-position: 0% 0%;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    margin-top: 15px;
}
.carousel-caption { 
    padding:20px;
    background-color:rgb(26,108,181);      
    background-color:rgba(26,108,181,0.7);
    color:#fff; 
    text-shadow:0 -1px 0 #1a6cb5; 
}

HTML

<div>
    <div class="main-image"></div>
    <div class="carousel-caption">
        <p>Text inside the image box.</p>
    </div>
</div>