Javascript — JQuery Slideshow работает только на самом последнем посте. Это нужно для работы над последними сообщениями на главной странице

Question

Javascript — JQuery Slideshow работает только на самом последнем посте. Это нужно для работы над последними сообщениями на главной странице

Полный новичок здесь.

Мне нужно следующее слайд-шоу, чтобы работать для всех последних сообщений на главной странице (WordPress). В настоящее время он работает только с самым последним сообщением (последним сообщением).

Вот мой код в content.php:

            <div id="textslider">

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide1'); ?>
</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide2'); ?>
</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide3'); ?>
</p>

</div>

</div>

Вот мой js-код в header.php (код Джонатана Снука):

<script src="http://code.jquery.com/jquery-latest.min.js">
<script>

$('#textslider > div:gt(0)').hide();

setInterval(function() {
$('#textslider > div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo('#textslider');
},  3000);

</script>

PS: я знаю, что Snook имеет несколько слайд-шоу на одной и той же версии страницы, но я не могу заставить это работать вообще. И что касается вышеизложенного, изменение текстового слайдера с идентификатора на класс не приводит к зацикливанию слайд-шоу. Пожалуйста помоги.

Спасибо

ОБНОВИТЬ:
@ Редди Спасибо, что вернулся ко мне. Вот как выглядит домашняя страница:

Юлиус Домашняя страница

Текстовое слайд-шоу тестового поста 12 работает просто отлично (слайды: «1», «2», «3»). Тестовый пост 10 также имеет текстовое слайд-шоу (слайды: «некоторый текст 1», «некоторый текст 2», «некоторый текст 3»), но, как вы можете видеть, слова не накладываются друг на друга.

Вот код для TEST POST 12 (самый последний пост):

     <article id="post-78" class="post-78 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
.post-78 { background-color: #000000 !important; }

</style>
<div class="post-cover post-cover-78 stag-image--none"></div>

<a href="http://myweb.com/test-post-12/" class="post-cover-link"></a>

<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">

<a href="http://myweb.com/test-post-12/" rel="bookmark">
<span class="entry-title-primary">test post 12</span> <span     class="entry-subtitle">subtitle bottom</span>                               </a>

<p class="entry-content">subtitle top</p>

<div id="textslider">

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
1
</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
2
</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
3
</p>

</div>

</div>
</h1>

</header><!-- .entry-header -->

<footer class="entry-meta">
<span class="posted-on"><a href="http://myweb.com/test-post-     12/" title="4:06 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-02T16:06:39+00:00">March 2, 2016</time><time class="updated" datetime="2016-03-03T16:00:26+00:00">March 3, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                           </footer><!-- .entry-meta --></div>
</article>

Это код для тестового поста 11:

     <article id="post-65" class="post-65 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
.post-65 { background-color: #000000 !important; }

</style>

<a href="http://myweb.com/test-post-11/" class="post-cover-link"></a>

<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">

<a href="http://myweb.com/test-post-11/" rel="bookmark">
<span class="entry-title-primary">test post 11</span> <span class="entry-subtitle">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span>                               </a>

<p class="entry-content">yoohoo</p>

<div id="textslider">

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">

</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">

</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">

</p>

</div>

</div>
</h1>

</header><!-- .entry-header -->

<footer class="entry-meta">
<span class="posted-on"><a href="http://myweb.com/test-post-11/" title="3:12 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:12:55+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T15:41:23+00:00">March 2, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                 </footer><!-- .entry-meta --></div>
</article>

Это код для теста POST 10 (этот также имеет слайд-шоу, но, как вы можете видеть, тексты накладываются друг на друга, и слайд-шоу не работает вообще):

     <article id="post-63" class="post-63 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
.post-63 { background-color: #000000 !important; }

</style>

<a href="http://myweb.com/test-post-10/" class="post-cover-link"></a>

<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">

<a href="http:/myweb.com/test-post-10/" rel="bookmark">
<span class="entry-title-primary">test post 10</span> <span class="entry-subtitle">am super cool</span>                             </a>

<p class="entry-content">i am cool</p>

<div id="textslider">

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
&quot;the coolest of all cakes!!!&quot;
</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
&quot;super good&quot;
</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
&quot;unbelievable&quot;
</p>

</div>

</div>
</h1>

</header><!-- .entry-header -->

<footer class="entry-meta">
<span class="posted-on"><a href="http://myweb.com/test-post-10/" title="3:12 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:12:19+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-03T18:02:40+00:00">March 3, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                 </footer><!-- .entry-meta --></div>
</article>

Это код для тестового поста 9:

     <article id="post-60" class="post-60 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
.post-60 { background-color: #000000 !important; }

</style>

<a href="http://myweb.com/test-post-9/" class="post-cover-link"></a>

<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">

<a href="http://myweb.com/test-post-9/" rel="bookmark">
<span class="entry-title-primary">test post 9</span> <span class="entry-subtitle">oblique is Cool</span>                                </a>

<p class="entry-content"></p>

<div id="textslider">

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">

</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">

</p>
</div>

<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">

</p>

</div>

</div>
</h1>

</header><!-- .entry-header -->

<footer class="entry-meta">
<span class="posted-on"><a href="http://myweb.com/test-post-9/" title="3:11 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:11:49+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T14:42:36+00:00">March 2, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                  </footer><!-- .entry-meta --></div>
</article>

Еще раз спасибо. Извините за разделенные блоки кода для постов 11, 10 и 9, не совсем уверен, как это исправить.

0

javascript jquery php slideshow wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Редактировать:

$('.textslider').each(function(){
$(this).children('div:gt(0)').hide();
});

$('.textslider').each(function(){
var parentDiv = $(this);
//alert(parentDiv);
setInterval(function() {
parentDiv.children('div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo(parentDiv);
},  3000, parentDiv);
});

Я не уверен, что это то, что вы ищете, но … надеюсь, это поможет пролить свет на вашу проблему:

$('#textslider > div').each(function(){
$(this).children('p:gt(0)').hide();
});

$('#textslider > div').each(function(){
var parentDiv = $(this);
//alert(parentDiv);
setInterval(function() {
parentDiv.children('p:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo(parentDiv);
},  3000, parentDiv);
});

Мой HTML (DivS …)

      <div id="textslider">
<div>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
<p>text5</p>
</div>
<div>
<p>texta</p>
<p>textb</p>
<p>textc</p>
<p>textd</p>
<p>texte</p>
</div>
<div>
<p>t1</p>
<p>t2</p>
<p>t3</p>
<p>t4</p>
<p>t5</p>
</div>
</div>

Все они «оживляют» одновременно.

0