Один слайдер на разных div-ах
 

Добрый вечер форумчане!
Есть страница которая должна быть разделена на 3 части: Левая, центральная, правая. При мобильной версии левая становится верхней, центральная средней, правая нижней. Причем на странице должен быть слайдер с изображением и текстом. Изображение слайдера должна быть на нижней части первого раздела. Кнопка смены слайда на средней, а текст слайдера на третей.

Для начала разделил контейнер на три части: дивы с классами <col-sm-4 col-xs-12>. Искал разные слайдеры, но нашел только слайдеры, где сначала идет главный класс или id слайда, потом первый слайд (весь его контент), второй слайд (весь контент второго слайда) и.т.д., типа:

<div class="feedback-slider slideInUp wow">
                    <div class="feedback-item"><!--Первый слайд сексии feedback-->
                        <div class="feedback-avatar">
                            <img src="media/feedback/avatar-1.jpg" alt="">
                        </div>
                        <div class="feedback-body">
                            <div class="feedback-author">
                                <p>1 Goal</p>
                            </div>
                            <div class="feedback-text">
                                <p> Mobile version</p>
                            </div>
                        </div>
                    </div>
                    <div class="feedback-item"><!--Второй слайд сексии feedback-->
                        <div class="feedback-avatar">
                            <img src="media/feedback/avatar-2.jpg" alt="">
                        </div>
                        <div class="feedback-body">
                            <div class="feedback-author">
                                <p>2 Goal</p>
                            </div>
                            <div class="feedback-text">
                                <p> Support </p>
                            </div>
                        </div>
                    </div>
                    <div class="feedback-item"><!--Третий слайд сексии feedback-->
                        <div class="feedback-avatar">
                            <img src="media/feedback/avatar-3.jpg" alt="">
                        </div>
                        <div class="feedback-body">
                            <div class="feedback-author">
                                <p>3 Goal</p>
                            </div>
                            <div class="feedback-text">
                                <p>Invest in foreign companies and start ups</p>
                            </div>
                        </div>
                    </div>
					 <div class="feedback-item"><!--Четвертый слайд сексии feedback-->
                        <div class="feedback-avatar">
                            <img src="media/feedback/avatar-2.jpg" alt="">
                        </div>
                        <div class="feedback-body">
                            <div class="feedback-author">
                                <p>4 Goal</p>
                            </div>
                            <div class="feedback-text">
                                <p> Supreme Election System</p>
                            </div>
                        </div>
                    </div>
                </div>

Т.е. его части никак нельзя разделить и поместить на 3-х разных блоках. Есть ли у кого слайдеры, контент которых можно разместить на разных блоках? И при смене слайда меняются на всех трех блоках. Эти три блока с разными контентами можно заключить в главный класс слайдера.
Я как-то не понятно пишу. Надеюсь, кто-нибудь поймет, что имел виду.

tarabukinivan,
может проще написать свой слайдер?

Спасибо Рони. Было бы классно, если найду готовый.

tarabukinivan,
удачи!

А на бутстраповском родном каруселе, если на трех разных сексиях поставлю по карусели с одинаковыми id, и в любой из этих трех секций поставлю одну кнопку для смены слайда, она вроде должна прихватить все три карусели или нет?

зачем id одинаковый, можете класс присвоить одинаковый.

Ну id само собой заменю на class, написал id потому, что по умолчанию стоит id.

В общем решил сделать на табах. На трех разных колонках по табу с одинаковыми классами.

Вобщем сделал так:

<div class="container-fluid"> 
        <div class="row">
        	<div class="col-md-3 col-xs-12 razd-1">
        		<div class="razd-flag-1">
	        		<img src="media/feedback/flag.jpg">
	        		<div class="tab-content feedback-img-slide clearfix">
			            <div class="tab-pane tr1 fade in active">
			                <div class="feedback-avatar">
	                            <img src="media/feedback/avatar-1.jpg" alt="">
	                        </div>
			            </div>
			            <div class="tab-pane fade tr2">
			                <div class="feedback-avatar">
	                            <img src="media/feedback/avatar-2.jpg" alt="">
	                        </div>
			            </div>
			            <div class="tab-pane fade tr3">
			                <div class="feedback-avatar">
	                            <img src="media/feedback/avatar-3.jpg" alt="">
	                        </div>
			            </div>
			        </div>
			    </div>
			    <div class="feedback-boy">
			    	<img src="media/feedback/boy.png" alt=""/>
			    </div>
        	</div>
        	<div class="col-md-6 col-xs-12 razd-2">
        		<img class="limits" src="media/feedback/limits.jpg">
                <div class="feedback-control">
	                <ul class="list-unstyled">
	                    <li class="active">
	                        <a href=".tr1" data-toggle="tab">1</a>
	                    </li>
	                    <li>
	                        <a href=".tr2" data-toggle="tab">2</a>
	                    </li>
	                    <li>
	                        <a href=".tr3" data-toggle="tab">3</a>
	                    </li>
	                </ul>
	            </div>
        		
        	</div><!-- div sm-6-->
        	<div class="col-md-3 col-xs-12 razd-3">
        		<img src="media/feedback/flag.jpg">
        		<div class="tab-content">
		            <div class="tab-pane fade in active tr1">
		                <div class="feedback-text">
		                	<h3>Заголовок1</h3>
                            <p>Invest in foreign companies and start ups</p>
                        </div>
		            </div>
		            <div class="tab-pane fade tr2">
		                <div class="feedback-text">
		                	<h3>Заголовок2</h3>
                            <p>Invest in foreign companies and start ups</p>
                        </div>
		            </div>
		            <div class="tab-pane fade tr3">
		                <div class="feedback-text">
		                	<h3>Заголовок3</h3>
                            <p>Invest in foreign companies and start ups</p>
                        </div>
		            </div>
		        </div>
        	</div>
        </div>
    </div>