Блог

Здесь я внедряю слайдер цикла 2.

Все работает правильно, за исключением пейджера шаблона для каждого слайда, который должен отображать пользовательский текст пейджера, который прилагается к каждому изображению.

Вот код:

 <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>
  

Любые указания о том, как решить эту проблему, были бы оценены.

Я нашел решение. Поскольку я использую div в качестве элемента слайда, код пейджера должен отображаться в div, а не в изображении:

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

Как только я разместил это, это решило проблему.