Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2017, 20:36
Интересующийся
Отправить личное сообщение для tarabukinivan Посмотреть профиль Найти все сообщения от tarabukinivan
 
Регистрация: 17.08.2017
Сообщений: 19

Один слайдер на разных 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-х разных блоках. Есть ли у кого слайдеры, контент которых можно разместить на разных блоках? И при смене слайда меняются на всех трех блоках. Эти три блока с разными контентами можно заключить в главный класс слайдера.
Я как-то не понятно пишу. Надеюсь, кто-нибудь поймет, что имел виду.
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2017, 20:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

tarabukinivan,
может проще написать свой слайдер?
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2017, 20:53
Интересующийся
Отправить личное сообщение для tarabukinivan Посмотреть профиль Найти все сообщения от tarabukinivan
 
Регистрация: 17.08.2017
Сообщений: 19

Спасибо Рони. Было бы классно, если найду готовый.
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2017, 21:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

tarabukinivan,
удачи!
Ответить с цитированием
  #5 (permalink)  
Старый 17.08.2017, 22:11
Интересующийся
Отправить личное сообщение для tarabukinivan Посмотреть профиль Найти все сообщения от tarabukinivan
 
Регистрация: 17.08.2017
Сообщений: 19

А на бутстраповском родном каруселе, если на трех разных сексиях поставлю по карусели с одинаковыми id, и в любой из этих трех секций поставлю одну кнопку для смены слайда, она вроде должна прихватить все три карусели или нет?
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2017, 22:59
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от tarabukinivan Посмотреть сообщение
А на бутстраповском родном каруселе, если на трех разных сексиях поставлю по карусели с одинаковыми id, и в любой из этих трех секций поставлю одну кнопку для смены слайда, она вроде должна прихватить все три карусели или нет?
зачем id одинаковый, можете класс присвоить одинаковый.
Ответить с цитированием
  #7 (permalink)  
Старый 18.08.2017, 18:46
Интересующийся
Отправить личное сообщение для tarabukinivan Посмотреть профиль Найти все сообщения от tarabukinivan
 
Регистрация: 17.08.2017
Сообщений: 19

Сообщение от j0hnik Посмотреть сообщение
зачем 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>

Последний раз редактировалось tarabukinivan, 18.08.2017 в 19:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 21:27
Jquery, Последовательное выполнение функций разных div в одном скрипте. schnitzer Общие вопросы Javascript 3 29.09.2013 02:49
Div внутри div valyan (X)HTML/CSS 3 03.09.2013 22:43
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
Границы элемента DIv gosha_kap Общие вопросы Javascript 1 06.07.2009 17:12