Как реализовать слайдер с помощью pdoResources

Всем добрый вечер! Убил весь день не могу решить проблему!

Вот салйдер.

Я решил это реализовать следующим образом!

В дереве ресурсов я создал категорию с ID7 КВАРТИРЫ, и поместил туда 5 ресурсов к примеру квартира-1,2,3,4,5. Добавил ТВ поле price, и картинку img.slider. Но вот что то пошло не так, знаний не хватает в документации по pdoResources ни чего полезного не нашел.

Читал статью но там это реализовано на ms2Gallery, к тому же на miniShop2, побывал на тестовом хостинге установить ms2Gallery ни чего не вышло, так как в моем случае miniShop2 не нужен! Да и не совсем в примере лично для меня хватает описания(((.

Вот что я намудрил, поправьте что не так делаю???

<style>
                    .hide-bullets {
                        list-style:none;
                        margin-left: -40px;
                        margin-top:20px;
                    }
                </style>
                
                <div id="main_area">
                <!-- Slider -->
                <div class="row">
                    <div class="col-xs-12" id="slider">
                        <!-- Top part of the slider -->
                        <div class="row">
                            <div class="col-sm-8" id="carousel-bounding-box">
                                <div class="carousel slide" id="myCarousel">
                                    <!-- Carousel items -->
                                    <div class="carousel-inner">
                                        [[pdoResources?
                                            &parents=`7`
                                            &depth=`0`
                                            &tplFirst==`spec.Tpl.first`
                                            &tpl=`spec.Tpl`
                                            &includeTVs=`img.slider`
                                        ]]
                                        <!--<div class="active item" data-slide-number="0">-->
                                        <!--<img src="http://placehold.it/770x500&text=one"></div>-->

                                        <!--<div class="item" data-slide-number="1">-->
                                        <!--<img src="http://placehold.it/770x500&text=two"></div>-->

                                        <!--<div class="item" data-slide-number="2">-->
                                        <!--<img src="http://placehold.it/770x500&text=three"></div>-->

                                        <!--<div class="item" data-slide-number="3">-->
                                        <!--<img src="http://placehold.it/770x500&text=four"></div>-->

                                        <!--<div class="item" data-slide-number="4">-->
                                        <!--<img src="http://placehold.it/770x500&text=five"></div>-->

                                        <!--<div class="item" data-slide-number="5">-->
                                        <!--<img src="http://placehold.it/770x500&text=six"></div>-->
                                    </div><!-- Carousel nav -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                    </a>                                
                                    </div>
                            </div>

                            <div class="col-sm-4" id="carousel-text"></div>

                            <div id="slide-content" style="display: none;">
                                
                                [[pdoResources?
                                            &parents=`7`
                                            &depth=`0`
                                            &useWeblinkUrl=`1`
                                            &tpl=`spec.Tpl.first.text`
                                            &includeTVs=`price`
                                        ]]
                                
                                <!--<div id="slide-content-0">-->
                                <!--    <h2>Slider One</h2>-->
                                <!--    <p>Lorem Ipsum Dolor</p>-->
                                <!--    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>-->
                                <!--</div>-->

                                <!--<div id="slide-content-1">-->
                                <!--    <h2>Slider Two</h2>-->
                                <!--    <p>Lorem Ipsum Dolor</p>-->
                                <!--    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>-->
                                <!--</div>-->

                                <!--<div id="slide-content-2">-->
                                <!--    <h2>Slider Three</h2>-->
                                <!--    <p>Lorem Ipsum Dolor</p>-->
                                <!--    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>-->
                                <!--</div>-->

                                <!--<div id="slide-content-3">-->
                                <!--    <h2>Slider Four</h2>-->
                                <!--    <p>Lorem Ipsum Dolor</p>-->
                                <!--    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>-->
                                <!--</div>-->

                                <!--<div id="slide-content-4">-->
                                <!--    <h2>Slider Five</h2>-->
                                <!--    <p>Lorem Ipsum Dolor</p>-->
                                <!--    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>-->
                                <!--</div>-->

                                <!--<div id="slide-content-5">-->
                                <!--    <h2>Slider Six</h2>-->
                                <!--    <p>Lorem Ipsum Dolor</p>-->
                                <!--    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div><!--/Slider-->

                <div class="row hidden-xs" id="slider-thumbs">
                        <!-- Bottom switcher of slider -->
                        <ul class="hide-bullets">
                            
                            [[pdoResources?
                                            &parents=`7`
                                            &depth=`0`
                                            &tpl=`spec.Tpl.thumb`
                                            &includeTVs=`img.slider`
                                        ]]
                            
                            <!-- <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-0"><img src=""></a>
                            </li>
                            
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-1"><img src="></a>
                            </li>
                            
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-2"><img src=""></a>
                            </li>
                            
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-3"><img src=""></a>
                            </li>
                            
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-4"><img src=""></a>
                            </li>
                            
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-5"><img src=""></a>
                            </li> -->
                        </ul>                 
                </div>
            </div>
            <script>
                  jQuery(document).ready(function($) {
 
        $('#myCarousel').carousel({
                interval: 5000
        });
 
        $('#carousel-text').html($('#slide-content-0').html());
 
        //Handles the carousel thumbnails
       $('[id^=carousel-selector-]').click( function(){
            var id = this.id.substr(this.id.lastIndexOf("-") + 1);
            var id = parseInt(id);
            $('#myCarousel').carousel(id);
        });
 
 
        // When the carousel slides, auto update the text
        $('#myCarousel').on('slid.bs.carousel', function (e) {
                 var id = $('.item.active').data('slide-number');
                $('#carousel-text').html($('#slide-content-'+id).html());
        });
});
            </script>

Шаблоны:

spec.Tpl

<div class="item" data-slide-number="1">
    <img src="[[+tv.img.slider]]"></div>

spec.Tpl.first

<div class="active item" data-slide-number="0">
<img src="[[+tv.img.slider]]"></div>

spec.Tpl.first.text

<div id="slide-content-0">
                              <h2>[[*longtitle]]</h2>
                                <p>[[+tv.price]]</p>
                                <p class="sub-text">October 24 2014 - <a href="[[+link]]">Подробнее</a></p>
                                </div>

spec.Tpl.thumb

<li class="col-sm-2">
    <a class="thumbnail" id="carousel-selector-0"><img src="[[+tv.img.slider]]"></a>
</li>

Вот что получилось сайт

Картинки он генерирует правильно, а вот как положено не работает.

Подскажите правильное решение, или где можно почитать как это сделать?

Есть такое чувство что все три блока тоесть «большая картинка», «текстовая часть», и «миниатюры» нужно объединить в один вызов сниппета, но как?

ps в дальнейшем хочу что бы вывод происходил по ТВ параметру, к примеру чекбокс (РАСПРОДАЖА), такое можно реализовать, прочитал документацию ни чего подобного не нашел!

Заранее спасибо!