为现有图像滑块添加标题

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> 标签。

Check out the example

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>