Почему псевдоклассы не работают?

Question

[ART4]

Добрый день, делаю по тиху сайт и столкнулся с такой фишке на modx cms.
Есть 4 изображения, пытаюсь сделать чтоб каждое изображение менялась на другие, на свои которые добавили.
Сам вывод стоит так:

[[!getPage?
         &element=`getResources`
         &parents=`17` 
         &tpl=`clearningTpl` 
         &limit=`4`
         &sortby=`menuindex`
         &sortdir=`ASC`
         &includeTVs=`1`
         &showLog=`1`
	 &processTVs=`1`
    ]]

Где clearningTpl

<div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_4  fusion-one-fourth fusion-column-inner-bg-wrapper 1_4" style="margin-top:0px;margin-bottom:0px;    float: left;">
        <div class="fusion-column-wrapper">
            <div class="fusion-sep-clear"></div>
            <div class="fusion-separator fusion-full-width-sep sep-none mySep" style="margin-left: auto;margin-right: auto;margin-top:550px;"></div>
            <div class="windows-1">
                <h3 style="text-align: center;"><a style="color: #ffffff;" href="[[~[[+id]]]]">[[+longtitle:ellipsis=`190`]]</a></h3>
            </div>
            <div class="fusion-clearfix"></div>
        </div>
        <span class="fusion-column-inner-bg hover-type-zoomin">
   			<a href="[[~[[+id]]]]" aria-label="yoga">
		<span class="bgfimg fusion-column-inner-bg-image">
			<img class="" src="[[pthumb? &input=`[[+tv.image]]` &options=`h=906&w=604`]]">
 		</span>
			</a>
 </span>
</div>

Ну и сам скрипт JS автоматом менялось:

<script type="text/javascript">
imgs = [
'[[*image-1]]',
'[[*image-2]]',
'[[*image-3]]',
];

setInterval(function(){
    img = imgs[Math.floor(Math.random()*imgs.length)];
    $('span.bgfimg img:nth-child(1)').attr('src', img);
}, 1000);
</script>

Прописал 1 картинку span.bgfimg img:nth-child(1) он не считает за 1 изображение. как решить проблему? Если 1 будет меняться, то просто продублирую и другим псевдоклассы да и всё, но не хочет

Answer 1

[Eugene Chefranov]

Конечно не работает, у вас картинка одна единственная в блоке получается

Если бы у вас была такая структура, то ваш код бы работал

<span class="bgfimg fusion-column-inner-bg-image">
<img class="" src="[[pthumb? &input=`[[+tv.image]]` &options=`h=906&w=604`]]">
<img class="" src="[[pthumb? &input=`[[+tv.image]]` &options=`h=906&w=604`]]">
<img class="" src="[[pthumb? &input=`[[+tv.image]]` &options=`h=906&w=604`]]">
<img class="" src="[[pthumb? &input=`[[+tv.image]]` &options=`h=906&w=604`]]">
</span>

А так вам от родителя слайдера надо плясать с пседоклассами

Comments

[ART4]

Если выключить js о это 4 блока с разными ссылками

Где у каждой задана своя картинка

[Eugene Chefranov]

ART4, вы используйте :nth-child(1) который ищет элемент внутри вашего спана, посмотрите на скрин с вашей консолью разработчика, сколько вы видите картинок внутри спана?

[ART4]

Eugene Chefranov, Смотрите расширенно

[Eugene Chefranov]

ART4, всё равно вы меня не поняли :)
В вашем случае будет как-то так

<script type="text/javascript">
imgs = [
'[[*image-1]]',
'[[*image-2]]',
'[[*image-3]]',
];

setInterval(function(){
    img = imgs[Math.floor(Math.random()*imgs.length)];
    $('.fusion-builder-row .fusion-layout-column:nth-child(1) .bgfimg img').attr('src', img);
}, 1000);
</script>

[ART4]

Eugene Chefranov, аа теперь понял))) спасибо добрый человек!

[ART4]

Eugene Chefranov, А может Вы знаете, либо где почитать чтоб в js коде не крутились тупо картинки, а плавно переходили с 1 на вторую?
Есть 2 картинки, они меняются каждые 2 секунды. Хочу чтоб плавно они менялись а не тупо по кругу шли.

imgs = [
'[[*image-2]]', 
'[[*image-3]]',
];

setInterval(
	function(){
   	 img = imgs[Math.floor(Math.random()*imgs.length)];
   	 $('.fusion-builder-row .fusion-layout-column:nth-child(1) .bgfimg img').attr('src', img);
	}, 2000);

[Eugene Chefranov]

ART4, используйте полноценный слайдер типа Slick