Добрый вечер форумчане! Есть страница которая должна быть разделена на 3 части: Левая, центральная, правая. При мобильной версии левая становится верхней, центральная средней, правая нижней. Причем на странице должен быть слайдер с изображением и текстом. Изображение слайдера должна быть на нижней части первого раздела. Кнопка смены слайда на средней, а текст слайдера на третей. Для начала разделил контейнер на три части: дивы с классами <col-sm-4 col-xs-12>. Искал разные слайдеры, но нашел только слайдеры, где сначала идет главный класс или id слайда, потом первый слайд (весь его контент), второй слайд (весь контент второго слайда) и.т.д., типа: HTML: <divclass="feedback-slider"> <divclass="feedback-item"><!--Первый слайд --> <divclass="feedback-avatar"> <imgsrc="media/feedback/avatar-1.jpg"alt=""> </div> <divclass="feedback-body"> <divclass="feedback-author"> <p>1 Goal</p> </div> <divclass="feedback-text"> <p> Mobile version</p> </div> </div> </div> <divclass="feedback-item"><!--Второй слайд сексии feedback--> <divclass="feedback-avatar"> <imgsrc="media/feedback/avatar-2.jpg"alt=""> </div> <divclass="feedback-body"> <divclass="feedback-author"> <p>2 Goal</p> </div> <divclass="feedback-text"> <p> Support </p> </div> </div> </div> <divclass="feedback-item"><!--Третий слайд сексии feedback--> <divclass="feedback-avatar"> <imgsrc="media/feedback/avatar-3.jpg"alt=""> </div> <divclass="feedback-body"> <divclass="feedback-author"> <p>3 Goal</p> </div> <divclass="feedback-text"> <p>Invest in foreign companies and start ups</p> </div> </div> </div> <divclass="feedback-item"><!--Четвертый слайд сексии feedback--> <divclass="feedback-avatar"> <imgsrc="media/feedback/avatar-2.jpg"alt=""> </div> <divclass="feedback-body"> <divclass="feedback-author"> <p>4 Goal</p> </div> <divclass="feedback-text"> <p> Supreme Election System</p> </div> </div> </div> </div> Т.е. его части никак нельзя разделить и поместить на 3-х разных блоках. Есть ли у кого слайдеры, контент которых можно разместить на разных блоках? И при смене слайда меняются на всех трех блоках. Эти три блока с разными контентами можно заключить в главный класс слайдера. Я как-то не понятно пишу. Надеюсь, кто-нибудь поймет, что имел виду.
На бутстраповском родном каруселе, если на трех разных сексиях поставлю по карусели с одинаковыми id, и в любой из этих трех секций поставлю одну кнопку для смены слайда, она вроде должна прихватить все три карусели или нет?
@tarabukinivan оформление кода https://php.ru/forum/threads/tipichnyj-dialog-s-novichkom.59596/#post-527225
Спасибо за оформление кода! Следующий раз учту. Потому, что решил, что многие на этом форуме наверное знают и про верстку. Или в смысле на другую ветку форума писать имеете виду?
Нет конечно. ID на то и ID, чтобы быть уникальным. Если нужна параллельная работа слайдеров, надо ручками пописать на JavaScript
HTML: <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> Само собой заменю id на class, написал id потому, что по умолчанию стоит id. В общем сделал на табах. На трех разных колонках по табу с одинаковыми классами.