Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Изменения На Главной Слайдер И Карусель Брендов

Автор Pavill, 30 мая 2017 09:37

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 21

#1 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 30 Май 2017 - 09:37

Добрый день !
Прошу помочь с оформлением главной страницы.
Необходимо установить слайдер со ссылками.
добавить 3 статичных картинки со ссылками.
и ниже карусель брендов с возможностью добавить новые, также со ссылками.

сайт для ориентира слайдера http://www.vishco.ru

SL-151854

Прикрепленные изображения

Наверх

#2 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 31 Май 2017 - 06:41

Здравствуйте.

Инструкция по установке слайдера:
https://storeland.ru/about/faq#80

Код самого слайдера из 6го пункта вставьте вместо:

<!-- Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
	  <div class="slide"></div>
	  <div class="text">
		<div class="title">Новая коллекция</div>
		<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
	  </div>
	  <div class="image">
		<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Slider Слайдер -->

После слайдера вставьте:

<!-- Карусель -->
{% IF index_page %}
<div class="brands">
	  <div class="box-up-sell products-container">
		<h3 class="title"><span>Бренды</span></h3>
		<div class="navigation">
		  <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
		  <a href="#" class="next"><i class="fa fa-angle-right"></i></a>
		</div>
		<div class="products-grid">
		
			<div class="item">
			  <div class="item-inner">
		   	 <a href="@"><img src="#" alt="" /></a>
			  </div>
			</div>
			
			<div class="item">
			  <div class="item-inner">
		   	 <a href="@"><img src="#" alt="" /></a>
			  </div>
			</div>
			
			<div class="item">
			  <div class="item-inner">
		   	 <a href="@"><img src="#" alt="" /></a>
			  </div>
			</div>
			
		</div>
	  </div>
	</div>
<script>
jQuery(function($) {
  var carouselU = $('.brands .products-grid');
	carouselU.owlCarousel({
	  items: 4,
	  itemsDesktop: [1199,3],
	  itemsDesktopSmall: [991,2],
	  itemsTablet: [767,2],
	  itemsTabletSmall: [641,1],
	  itemsMobile: [481,1],
	  responsive: true,
	  responsiveRefreshRate : 200,
	  responsiveBaseWidth: window,
	  lazyLoad: true,
	  pagination: false,
	  itemsScaleUp: true,
	  slideSpeed: 800,
	  stopOnHover: true,
	  touchDrag: false,
	  mouseDrag: false,
	  autoPlay: false,
	  addClassActive: true,
	  autoHeight: false,
	  afterAction: function (e) {
		if(this.$owlItems.length > this.options.items){
		  $('.brands .navigation').show();
		}else{
		  $('.brands .navigation').hide();
		  $('.brands .owl-carousel .owl-item').css("max-width", "300px");
		}
	  }
	});
  jQuery('.brands .navigation .prev').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.prev');
  });
  jQuery('.brands .navigation .next').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.next');
  });
});
</script>
{% ENDIF %}
<!-- Карусель -->

Вместо знака @ укажите ссылку на страницу, а вместо знака # ссылку на картинку бренда.

Наверх

#3 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 07:34

Добрый день !
Слайдер вообще не встрал, ругается.
В карусели тоже Бренды должны быть посередине.

Да и еще вопрос чтобы слайдер не наплывал на меню.

SL-151854

Отлично реализовал Ваш специалист слайдер и карусель брендов в SL-403194
Но копирование карусели оттуда результатов не дало, наверно стили еще надо добавлять.

http://lingerie-market.ru
Да и еще вопрос чтобы слайдер не наплывал на меню.

Наверх

#4 Ирина345

Активный участник

Модераторы
5 709 сообщений

Отправлено 31 Май 2017 - 14:56

Pavill (31 Май 2017 - 07:34) писал:

Добрый день !
Слайдер вообще не встрал, ругается.
В карусели тоже Бренды должны быть посередине.

Да и еще вопрос чтобы слайдер не наплывал на меню.

SL-151854

Отлично реализовал Ваш специалист слайдер и карусель брендов в SL-403194
Но копирование карусели оттуда результатов не дало, наверно стили еще надо добавлять.

http://lingerie-market.ru
Да и еще вопрос чтобы слайдер не наплывал на меню.

Здравствуйте, найдите в шаблоне htML

<!-- Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
	  <div class="slide"></div>
	  <div class="text">
		<div class="title">Обновление дизайна сайта</div>
		<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
	  </div>
	  <div class="image">
		<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Slider Слайдер -->

замените на


	{% IF index_page %}
	<!-- Slick Slider -->
  <script type="text/javascript">
	$(document).on('ready', function() {
	  $('.single-item').slick({
		dots: true,
		arrows: false,
		autoplay: true,
		autoplaySpeed: 2000
	  });
	});
  </script>
  <div class="container">
	<div class="main__banner">
		<div class="row">
		  <div class="col-md-12 col-sm-12 col-xs-12">
			<div class="slider single-item">
				<div><img src="/design/slide2.jpg"></div>
				<div><img src="/design/slide1.jpg"></div>
				<div><img src="/design/slide3.jpg"></div>
				<div><img src="/design/slide4.jpg"></div>
			</div>
		  </div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-4">
			<a href="ссылка">
				<img src="/design/slide4.jpg" alt="" class="img-responsive main__collection_block">
			</a>	   
		</div>
		 <div class="col-sm-4">
			<a href="ссылка">
				<img src="/design/slide4.jpg" alt="" class="img-responsive main__collection_block">
			</a>	   
		</div>
		<div class="col-sm-4">
			<a href="ссылка">
				<img src="/design/slide4.jpg" alt="" class="img-responsive main__collection_block">
			</a>	   
		</div>
	</div>
	<div class="row">
	  <div class="col-xs-12">
		<div class="brand-block">
		  <div><div><a href="#"><img src="/design/slide4.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide1.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide2.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide3.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide4.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide1.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide4.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide1.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide2.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide3.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide4.jpg"></a></div></div>
		  <div><div><a href="#"><img src="/design/slide1.jpg"></a></div></div>
		</div>
		<script>
		$('.brand-block').slick({
		  infinite: true,
		  autoplay: true,
		  slidesToShow: 6,
		  slidesToScroll: 3,
		  swipe: false,
		  centerMode: true,
		  centerPadding: '10px'   
		});		 
		</script>
	  </div>
	</div>
  </div>
	{% ENDIF %}

где измените ссылки на изображения /design/slide1.jpg

далее найдите в шаблоне hTML

  <script>
	$(".callback > a.button").fancybox({
	  'hideOnContentClick': true,
	  'title': false
	});
  </script>
  <!-- /END Обратный звонок в шапке -->

после вставьте

<script src="{ASSETS_JS_PATH}slick.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}slick.css">
  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}slick-theme.css">

Наверх

#5 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 15:52

Добрый день !
Сработало частично. Необходимо поправить

Слайдер чтобы был под меню (сейчас налезает).

Карусель не работает корректно, убрал этот код.

Слетел текст и НОВИНКИ. (надо вернуть на главную).

Если есть возможность уважаемый програмист, поправьте код самостоятельно, в прошлый раз Ваш сотрудник сам изменил код и проверил. (это и быстрее и лучше). Велетают ошибки.

SL-151854

Большое спасибо !

Наверх

#6 Ирина345

Активный участник

Модераторы
5 709 сообщений

Отправлено 31 Май 2017 - 16:31

Pavill (31 Май 2017 - 15:52) писал:

Добрый день !
Сработало частично. Необходимо поправить

Слайдер чтобы был под меню (сейчас налезает).

Карусель не работает корректно, убрал этот код.

Слетел текст и НОВИНКИ. (надо вернуть на главную).

Если есть возможность уважаемый програмист, поправьте код самостоятельно, в прошлый раз Ваш сотрудник сам изменил код и проверил. (это и быстрее и лучше). Велетают ошибки.

SL-151854

Большое спасибо !

Вы удалили часть нужного кода, найдите в шаблоне hTML код

<div class="container">
<div class="main__banner">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="slider single-item">
<div><img src="http://st.underwear2020.ru/6/2142/457/slaider-atl.jpg"></div>
<div><img src="http://st.underwear2020.ru/6/2142/460/slaider-cor.jpg"></div>
<div><img src="http://st.underwear2020.ru/6/2142/462/slaider-cor-det.jpg"></div>
<div><img src="http://st.underwear2020.ru/6/2142/461/slaider-cor-2017.jpg"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="ссылка">
<img src="http://st.underwear2020.ru/9/2142/463/slide_atlantic.png" alt="" class="img-responsive main__collection_block">
</a>
</div>
<div class="col-sm-4">
<a href="ссылка">
<img src="http://st.underwear2020.ru/9/2142/463/slide_atlantic.png" alt="" class="img-responsive main__collection_block">
</a>
</div>
<div class="col-sm-4">
<a href="ссылка">
<img src="http://st.underwear2020.ru/9/2142/463/slide_atlantic.png" alt="" class="img-responsive main__collection_block">
</a>
</div>


{% ENDIF %}
<!-- Хлебные крошки -->

замените на

<div class="container">
<div class="main__banner">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="slider single-item">
<div><img src="http://st.underwear2020.ru/6/2142/457/slaider-atl.jpg"></div>
<div><img src="http://st.underwear2020.ru/6/2142/460/slaider-cor.jpg"></div>
<div><img src="http://st.underwear2020.ru/6/2142/462/slaider-cor-det.jpg"></div>
<div><img src="http://st.underwear2020.ru/6/2142/461/slaider-cor-2017.jpg"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="ссылка">
<img src="http://st.underwear2020.ru/9/2142/463/slide_atlantic.png" alt="" class="img-responsive main__collection_block">
</a>
</div>
<div class="col-sm-4">
<a href="ссылка">
<img src="http://st.underwear2020.ru/9/2142/463/slide_atlantic.png" alt="" class="img-responsive main__collection_block">
</a>
</div>
<div class="col-sm-4">
<a href="ссылка">
<img src="http://st.underwear2020.ru/9/2142/463/slide_atlantic.png" alt="" class="img-responsive main__collection_block">
</a>
</div>
</div>
</div>

{% ENDIF %}
<!-- Хлебные крошки -->

далее найдите в файле main.css

.index #header {
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
background-color: rgba(220, 220, 220, 0.5);
}

замените на

.index #header {
position: relative;
width: 100%;
top: 0;
right: 0;
left: 0;
background-color: rgba(220, 220, 220, 0.5);
}

Наверх

#7 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 16:32

Карусель сделал.. Прошу опустить слайдер под меню..

И перед каруселью сделать надпись Бренды - по стилю как Новинки

Спасибо Большое.

SL-151854

Наверх

#8 Ирина345

Активный участник

Модераторы
5 709 сообщений

Отправлено 31 Май 2017 - 16:55

Pavill (31 Май 2017 - 16:32) писал:

Карусель сделал.. Прошу опустить слайдер под меню..

И перед каруселью сделать надпись Бренды - по стилю как Новинки

Спасибо Большое.

SL-151854

Слайдер Вам опустили по инструкции из сообщения выше, далее что бы установить заголовок на карусель, найдите в шаблоне hTML

<div class="col-xs-12">
<div class="brand-block">

замените на

<div class="col-xs-12" style="text-align: center;">
<div class="brand-block-titleblock">
<div class="brand-block-title"><span>БРЕНДЫ</span></div>
</div>
<div class="brand-block">

далее в конец файла main.css добавьте

.brand-block-titleblock:after {
	right: 98%;
}
.brand-block-titleblock:before {
	left: 98%;
}
.brand-block-titleblock:before, .brand-block-titleblock:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 100%;
	background: #E5E5E5;
	height: 1px;
}
.brand-block-titleblock {
	display: inline-block;
	position: relative;
	width: auto;
	text-align: center;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	list-style-position: inside;
}
.brand-block-title {
	display: block;
	position: relative;
	float: left;
	width: auto;
}
.brand-block-titleblock span {
	display: block;
	position: relative;
	font-weight: 100;
	font-size: 21px;
	padding: 6px 30px;
	text-transform: uppercase;
	background: none;
	color: #22121e;
	cursor: pointer;
}

Наверх

#9 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 17:01

Бренды добавил.
Все отлично, но слайдер опять улетел под меню. посмотрите пожалуйста..

Огромная благодарность Вашей команде.

С уважением, Павел

Наверх

#10 Ирина345

Активный участник

Модераторы
5 709 сообщений

Отправлено 31 Май 2017 - 17:03

Pavill (31 Май 2017 - 17:01) писал:

Бренды добавил.
Все отлично, но слайдер опять улетел под меню. посмотрите пожалуйста..

Огромная благодарность Вашей команде.

С уважением, Павел

найдите в файле main.css

.index #header {
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
background-color: rgba(220, 220, 220, 0.5);
}

замените на

.index #header {
position: relative;
width: 100%;
top: 0;
right: 0;
left: 0;
background-color: rgba(220, 220, 220, 0.5);
}

Наверх

#11 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 17:15

Все Супер !!

Еще раз огромное спасибо !

Наверх

#12 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 20:04

Маленький вечерний вопрос.
Как добавить ссылки на слайдер ??

Спасибо.

Наверх

#13 RayLi

Активный участник

Модераторы
2 864 сообщений

Отправлено 31 Май 2017 - 20:38

Pavill (31 Май 2017 - 20:04) писал:

Маленький вечерний вопрос.
Как добавить ссылки на слайдер ??

Спасибо.

Попробуйте, пожалуйста, в данном случае в шаблоне html найти следующий код:

				  <div class="col-md-12 col-sm-12 col-xs-12">
						<div class="slider single-item">
								<div><img src="http://st.underwear2020.ru/7/2142/905/slaider-atl-cup.jpg"></div>
								<div><img src="http://st.underwear2020.ru/6/2142/460/slaider-cor.jpg"></div>
								<div><img src="http://st.underwear2020.ru/12/2142/912/slaider-cor-woman.jpg"></div>
								<div><img src="http://st.underwear2020.ru/6/2142/917/slaider-cor-det_1.jpg"></div>
						</div>
				  </div>
				</div>
		</div>
		<div class="row">

И заменить его вот этим вот кодом:

				  <div class="col-md-12 col-sm-12 col-xs-12">
						<div class="slider single-item">
								<div><a href="#"><img src="http://st.underwear2020.ru/7/2142/905/slaider-atl-cup.jpg"></a></div>
								<div><a href="#"><img src="http://st.underwear2020.ru/6/2142/460/slaider-cor.jpg"></a></div>
								<div><a href="#"><img src="http://st.underwear2020.ru/12/2142/912/slaider-cor-woman.jpg"></a></div>
								<div><a href="#"><img src="http://st.underwear2020.ru/6/2142/917/slaider-cor-det_1.jpg"></a></div>
						</div>
				  </div>
				</div>
		</div>
		<div class="row">

Где заместо - # , пропишите, пожалуйста, требуемые вам прямые ссылки.

Наверх

#14 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 20:42

Благодарю !

Наверх

#15 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 31 Май 2017 - 21:00

Еще вопрос по поводу мобильности сайта. Яндекс пишет есть горизонтальная прокрутка.
Помойму это связано с поисковой строчкой на главной.
Остальное вроде в порядке. Прошу проверить данный элемент на мобильность.
SL-151854

Наверх

#16 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 01 Июнь 2017 - 06:35

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.header-top .block.search #search_mini_form {
	margin: 0 15px 0 0;
}

замените на:

.header-top .block.search #search_mini_form {
	margin: 0 15px 0 0;
	width: 100%;
}

Наверх

#17 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 01 Июнь 2017 - 06:55

Спасибо, еще один элемент не мобильный надпись Бренды.

Наверх

#18 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 01 Июнь 2017 - 07:31

В main.css найдите:

.brand-block-titleblock span {
		display: block;
		position: relative;
		font-weight: 100;
		font-size: 21px;
		padding: 6px 30px;
		text-transform: uppercase;
		background: none;
		color: #22121e;
		cursor: pointer;
}

после него пропишите:

@media all and (max-width: 481px) {
.brand-block-titleblock:before, .brand-block-titleblock:after {
		display: none;
}
}

Наверх

#19 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 01 Июнь 2017 - 09:39

Все отлично !
Большое спасибо !!!

Наверх

#20 Pavill

Продвинутый пользователь

Пользователи
104 сообщений

Отправлено 09 Июнь 2017 - 10:45

Доброе утро !
Помогите пожалуйста убрать Обратный звонок с главной.
чтобы не нарушилась верхняя шапка.

SL-151854

Прикрепленные изображения

Наверх

Вперед

Обратно в Главная

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Изменения На Главной Слайдер И Карусель Брендов

Прикрепленные изображения

Прикрепленные изображения

Количество пользователей, читающих эту тему: 0

Войти

Google поиск