Question

我正在实施Cycle 2滑块here。

一切正常，但每张幻灯片模板寻呼机除外，它应显示每张图片附带的自定义寻呼机文字。

以下是代码：

<div class="cycle-slideshow" 
    data-cycle-fx=fade
    data-cycle-timeout=5000
    pause-on-hover=true
    data-cycle-pager="#per-slide-template"
    data-cycle-slides="> div"
    >

    <div class="slide">
    <h3 class="shift">Morning Shift </h3>
    <div class="slide-content">
            <div class="text-box">
                    <h3>8:00 a.m.</h3>
                        <p>Arrive at the client’s home, greet him or her with a friendly smile, and learn from the client how you can be of assistance that day. Remind the client to take medications and assist with grooming and dressing if needed. </p>
            </div>
                <img src="http://livefreehomehealthcare.com/images/uploads/am-8.png" data-cycle-pager-template="<a href=#>8am</a>">
        </div>
    </div><!-- end slide -->

    <div class="slide">
    <h3 class="shift">Morning Shift </h3>
    <div class="slide-content">
            <div class="text-box">
                    <h3>10:00 a.m.</h3>
                        <p>Play a game of cards together, scrapbook, look at photos, reminisce or listen to music to provide some vital mental stimulation and engagement, particularly for a client with dementia or Alzheimer’s. </p>
            </div>
                <img src="http://livefreehomehealthcare.com/images/uploads/am-10.png" data-cycle-pager-template="<a href=#>10am</a>">
        </div>
    </div><!-- end slide -->

    <div class="slide">
    <h3 class="shift">Morning Shift </h3>
    <div class="slide-content">
            <div class="text-box">
                    <h3>11:00 a.m.</h3>
                        <p>If the weather is nice, take a walk around the block or to the park with the client to get some exercise. While the client is resting after the walk, do some other light housekeeping. Then prepare and serve lunch, and make sure the client has everything he or she needs.</p>
            </div>
                <img src="http://livefreehomehealthcare.com/images/uploads/am-11.png" data-cycle-pager-template="<a href=#>11am</a>">
        </div>
    </div><!-- end slide -->

    <div class="slide">
    <h3 class="shift">Evening Shift</h3>
    <div class="slide-content">
            <div class="text-box">
                    <h3>2:00 p.m.</h3>
                        <p>Run errands if the client needs medications from the pharmacy or a grocery run. Take the client on a trip to the barber, hairdresser or the library. </p>
            </div>
                <img src="http://livefreehomehealthcare.com/images/uploads/pm-2.png" data-cycle-pager-template="<a href=#>2pm</a>">
        </div>
    </div><!-- end slide -->

    <div class="slide">
    <h3 class="shift">Evening Shift </h3>
    <div class="slide-content">
            <div class="text-box">
                    <h3>5:30 p.m.</h3>
                        <p>Prepare a special meal that the client can assist with in whatever way he or she is able.</p>
            </div>
                <img src="http://livefreehomehealthcare.com/images/uploads/pm-5.png" data-cycle-pager-template="<a href=#>5:30pm</a>">
        </div>
    </div><!-- end slide -->

    <div class="slide">
    <h3 class="shift">Evening Shift/Overnight </h3>
    <div class="slide-content">
            <div class="text-box">
                    <h3>9:00 p.m.</h3>
                        <p>Help the client prepare for bed. This may involve assisting the client with bathing and dressing. Some clients require overnight assistance from a caregiver or LNA. Caregivers stay at the client’s home to assist as needed throughout the night with using the bathroom, trouble sleeping or other necessities.</p>
            </div>
                <img src="http://livefreehomehealthcare.com/images/uploads/pm-9.png" data-cycle-pager-template="<a href=#>9pm</a>">
        </div>
    </div><!-- end slide -->

</div>
<!-- empty element for pager links -->
<div id=per-slide-template class="center internal"></div>

输出就像这样，而不是那里的时间，它似乎是默认的寻呼机输出。

div id="per-slide-template" class="center internal">
<span class="">•</span>
<span class="cycle-pager-active">•</span>
<span class="">•</span>
<span class="">•</span>
<span class="">•</span>
<span class="">•</span>
</div>

任何有关如何解决此问题的指导将不胜感激。

Answer 1

我发现了解决方案。因为我使用div作为幻灯片元素，所以寻呼机代码必须在div中，而不是在图像中：

data-cycle-pager-template="<a href=#>5:30pm</a>"

一旦我放置它，就解决了问题。

jQuery Cycle 2 - 每张幻灯片寻呼机无法正确显示

1 个答案: