Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2018, 21:10
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Обтекание слайдера
Помогите пожалуйста с такой задачей. Есть слайдер и текст (который разворачивается при нажатии на кнопку "Читать полностью"). Текст в развернутом виде должен обтекать слайдер. Пробовал overflow:hidden и float:right, но почему-то не работает ( Хотя скорее всего что-то не так делаю, запутался в конец. Приложу два скрина для наглядности (первый-текст свернут, второй-текст развернут). Заранее благодарен!

Вот Html
<article>
<div class="about_us_block">
<div class="title"><img src="images/title/title_2.png" alt="О нас"></div>
<div class="about_txt f18px">Мы начали свой путь точно так же как и Вы сейчас. Долго выбирали свою нишу, считали риски, планировали выручку. Этот путь у нас занял не мало времени, целых четыре года проб и ошибок. Как мы можем теперь сказать - самое главное это выбрать надежного поставщика.<p></p> 

Согласитесь, когда у вас уже работает бизнес, вы платите арендную плату, зарплату работникам, даже задержка поставки в один день - это катастрофа. Поэтому мы и стали оптовым поставщиком. У нас у самих боле 9 своих точек расположенных по всему Минску, и мы знаем и понимаем что такое обеспечение бизнеса. Бизнес розничных продаж совсем не простой, и требует от вас усилий.<p></p>

Дело в том что тут очень много факторов от которых зависит прибыль, например, расположение точки, ассортимент, а так же ведение бухгалтерии. Но мы можем вам помочь!
</div>
<div  class="txt_more f14px cursor">Читать полностью<img class="more_img" src="images/about_us/more.png" alt="иконка вниз"></div>	
<div class="about_txt_full f18px">Мы начали свой путь точно так же как и Вы сейчас. Долго выбирали свою нишу, считали риски, планировали выручку. Этот путь у нас занял не мало времени, целых четыре года проб и ошибок. Как мы можем теперь сказать - самое главное это выбрать надежного поставщика.<p></p> 

Согласитесь, когда у вас уже работает бизнес, вы платите арендную плату, зарплату работникам, даже задержка поставки в один день - это катострофа. Поэтому мы и стали оптовым постовщиком. У нас у самих боле 9 своих точек расположенных по всему Минску, и мы знаем и понимаем что такое обеспечение бизнеса. Бизнес розничных продаж совсем не простой, и требует от вас усилий.<p></p> 

Дело в том что тут очень много факторов от которых зависит прибыль, например, расположение точки, ассортимент, а так же ведение бухгалтерии. Но мы можем вам помочь! За все это время мы накопили неплохую базу знаний, который готовы с в вами поделиться.<p></p>

Девиз нашей компании – «С нами жизнь слаще!» воплощается в сладкой и полезной продукции. Органические сладости, натуральные конфеты, в которых использованы только полезные для здоровья ингредиенты, представлены в огромном ассортименте. В первую очередь, это всеми любимые леденцы. Натуральные леденцы, как классического карамельного вкуса, так и оригинальных фруктово - ягодных сочетаний неизменно пользуются повышенным спросом. Это самая востребованная у покупателей позиция. Яркие леденцы на палочке – это не просто вкусное угощение, это красивый гостинец.<p></p>
					
Наша команда использует самое современное оборудование для выпуска сладостей. Еще с детства многие помнят прекрасный фруктовый мармелад, который был густо посыпан сахаром. Сейчас на современном оборудовании выпускается множество разновидностей этого лакомства, но главное качество, из-за которого мармелад любят и дети, и взрослые – это натуральность и полезность. Мы сделали производство мармелада одним из основных направлений. 
</div>
<div class="txt_less f14px cursor">Свернуть назад<img class="less_img" src="images/about_us/less.png"></div>
<div class="objects_slider">
<a href="#"><img src="images/objects_slider/object_1.png" alt="Картинка слайдера 1" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_2.png" alt="Картинка слайдера 2" class="object_slide_img"></a>	
<a href="#"><img src="images/objects_slider/object_3.png" alt="Картинка слайдера 3" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_4.png" alt="Картинка слайдера 4" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_5.png" alt="Картинка слайдера 5" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_6.png" alt="Картинка слайдера 6" class="object_slide_img"></a>
</div>
</div>
</article>


Вот css

Код:
.about_txt {
	height: 370px;
	width: 540px;
	margin: -20px 0 0 25px;
}

.txt_more {
	float: left;
	margin: 5px 0 15px 420px;
	cursor: pointer;
}

.txt_less {
	margin: 15px 0 15px 1010px;
	cursor: pointer;
	display: none;
}

.more_img, .less_img {
	margin-left: 5px;
}

.about_txt_full {
	height: 100%;
	margin: -20px 20px 0 25px;
	display: none;
}

.objects_slider {
	float: right;
	width: 555px;
	margin: -387px 25px 0 0;
}

.object_slide_img {
	width: 555px;
}
Вот js для развертки текста

var more = document.querySelectorAll('.txt_more');
[].forEach.call(more, function(el,i) {
   el.addEventListener("click", function () {
        this.style.display = "none";
        el.parentNode.querySelector('.about_txt').style.display = "none";
        el.parentNode.querySelector('.about_txt_full').style.display = "block";
        el.parentNode.querySelector('.txt_less').style.display = "block";
   });
});
var less = document.querySelectorAll('.txt_less');
[].forEach.call(less, function(el,i) {
   el.addEventListener("click", function () {
        this.style.display = "none";
        el.parentNode.querySelector('.about_txt_full').style.display = "none";
        el.parentNode.querySelector('.about_txt').style.display = "block";
        el.parentNode.querySelector('.txt_more').style.display = "block";
   });
});
Изображения:
Тип файла: jpg 1.JPG (145.6 Кб, 5 просмотров)
Тип файла: jpg 2.JPG (190.0 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2018, 09:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Попробуйте слайдер в html перед текстом разместить.
Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2018, 11:02
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Спасибо огромное!!!! ) Вчера мучился целый день, даже вставлял в один div с текстом, а перед ним не попробовал ) Как часто бывает все получилось проще, чем казалось. Еще раз спасибо!
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное пролистывание картинок слайдера Corazon Элементы интерфейса 3 30.01.2017 22:07
Не работает автопрокрутка слайдера podsolomko95 Элементы интерфейса 0 06.04.2016 11:02
Как организовать два слайдера по принципу обложка-внутренние страницы? helgajijka jQuery 4 06.09.2015 13:52
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 15:56
Два слайдера на странице с одинаковыми классами работают одновременно. SlafkoCe jQuery 4 14.12.2012 12:44