Перейти к содержимому



  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 13 Февраль 2017 - 13:21

Инструкция для слайдера вместо статичной картинки.

Редактируем шаблон HTML
Находим
<div id="slideshow">
	 <div class="preloader"><span class="content-loading"></span></div>
	 <div id="slider">
	 <ul class="slidercontent clearfix">
		 <li class="slider-item-1 ">
		 <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img">
		 <div class="item-html">
			 <div class="container">
			 <div class="text-border">
				 <h2>Новогодние подарки</h2>
				 <h3>Для детей и взрослых</h3>
				 <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a>
			 </div>
			 </div>
		 </div>
		 </li>
		 <li class="slider-item-2">
		 <img src="{ASSETS_IMAGES_PATH}element1.png?design=cosines" class="item-img" title="element1" alt="element1">
		 </li>
		 <li class="slider-item-3">
		 <img src="{ASSETS_IMAGES_PATH}element2.png?design=cosines" class="item-img" title="element2" alt="element2">
		 </li>
		 <li class="slider-item-4">
		 <img src="{ASSETS_IMAGES_PATH}element3.png?design=cosines" class="item-img" title="element3" alt="element3">
		 </li>
		 <li class="slider-item-5">
		 <img src="{ASSETS_IMAGES_PATH}element4.png?design=cosines" class="item-img" title="element4" alt="element4">
		 </li>
		 <li class="slider-item-6">
		 <img src="{ASSETS_IMAGES_PATH}element5.png?design=cosines" class="item-img" title="element5" alt="element5">
		 </li>
		 <li class="slider-item-7">
		 <img src="{ASSETS_IMAGES_PATH}element6.png?design=cosines" class="item-img" title="element6" alt="element6">
		 </li>
	 </ul>
	 </div>
</div>

Заменяем на
<div id="slideshow">
	 <div class="preloader"><span class="content-loading"></span></div>
	 <div id="slider">
	 <div class="slider-item-1 ">
		 <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img">
		 <div class="item-html">
		 <div class="container">
			 <div class="text-border">
			 <h2>Новогодние подарки</h2>
			 <h3>Для детей и взрослых</h3>
			 <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a>
			 </div>
		 </div>
		 </div>
	 </div>
	 <div class="slider-item-1 ">
		 <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img">
		 <div class="item-html">
		 <div class="container">
			 <div class="text-border">
			 <h2>Новогодние подарки</h2>
			 <h3>Для детей и взрослых</h3>
			 <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a>
			 </div>
		 </div>
		 </div>
	 </div>
	 <div class="slider-item-1 ">
		 <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img">
		 <div class="item-html">
		 <div class="container">
			 <div class="text-border">
			 <h2>Новогодние подарки</h2>
			 <h3>Для детей и взрослых</h3>
			 <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a>
			 </div>
		 </div>
		 </div>
	 </div>
	 </div>
	 <ul class="slidercontent clearfix">
	 <li class="slider-item-2">
		 <img src="{ASSETS_IMAGES_PATH}element1.png?design=cosines" class="item-img" title="element1" alt="element1">
	 </li>
	 <li class="slider-item-3">
		 <img src="{ASSETS_IMAGES_PATH}element2.png?design=cosines" class="item-img" title="element2" alt="element2">
	 </li>
	 <li class="slider-item-4">
		 <img src="{ASSETS_IMAGES_PATH}element3.png?design=cosines" class="item-img" title="element3" alt="element3">
	 </li>
	 <li class="slider-item-5">
		 <img src="{ASSETS_IMAGES_PATH}element4.png?design=cosines" class="item-img" title="element4" alt="element4">
	 </li>
	 <li class="slider-item-6">
		 <img src="{ASSETS_IMAGES_PATH}element5.png?design=cosines" class="item-img" title="element5" alt="element5">
	 </li>
	 <li class="slider-item-7">
		 <img src="{ASSETS_IMAGES_PATH}element6.png?design=cosines" class="item-img" title="element6" alt="element6">
	 </li>
	 </ul>
</div>

Данный кусок кода отвечает за вывод слайдов и небольшого текстового описания, который Вы можете отредактировать на свое усмотрение, заменив необходимые вам параметры. Этот код дублируем для каждого слайда заменяя изображение и текст.
	 <div class="slider-item-1 ">
		 <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img">
		 <div class="item-html">
		 <div class="container">
			 <div class="text-border">
			 <h2>Новогодние подарки</h2>
			 <h3>Для детей и взрослых</h3>
			 <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a>
			 </div>
		 </div>
		 </div>
	 </div>

Затем редактируем main.js
Находим
// Запуск слайдера
$(document).ready(function(){
var slider = $('#slideshow .slider');
slider.owlCarousel({
items: 1,
singleItem : true,
autoplay: false,
loop: true,
dots: true,
dotsSpeed: 500,
dotsContainer: '.slider-navigation'
});
slider.on('changed.owl.carousel', function(event) {
var item_index = event.item.index + 1;
$('.slider-title').html($('.slider :nth-child('+item_index+') a span').html());
$('.slider-title').attr('href', $('.slider :nth-child('+item_index+') a').attr('href'));
});
});

Заменяем на
// Запуск слайдера
$(document).ready(function(){
var slider = $('#slideshow #slider');
slider.owlCarousel({
items: 1,
singleItem : true,
autoplay: true,
smartSpeed: 800,
loop: true,
dots: true,
dotsSpeed: 500
});
slider.on('changed.owl.carousel', function(event) {
var item_index = event.item.index + 1;
$('.slider-title').html($('.slider :nth-child('+item_index+') a span').html());
$('.slider-title').attr('href', $('#slider :nth-child('+item_index+') a').attr('href'));
});
});

Затем Находим
// Движущиеся объекты в слайдере
function sliderObj() {
// Parallax
var itemLi = $('#slider ul li');
itemLi.has('img[title="element1"]').find('img').attr("data-depth","0.15").addClass('layer');
itemLi.has('img[title="element2"]').find('img').attr("data-depth","0.20").addClass('layer');
itemLi.has('img[title="element3"]').find('img').attr("data-depth","0.10").addClass('layer');
itemLi.has('img[title="element4"]').find('img').attr("data-depth","0.20").addClass('layer');
itemLi.has('img[title="element5"]').find('img').attr("data-depth","0.80").addClass('layer');
itemLi.has('img[title="element6"]').find('img').attr("data-depth","0.90").addClass('layer');
if($(window).width() > 768) {
checkScene = $('body #slider');
if (checkScene.length) {
scene = document.getElementById('slider');
var parallax = new Parallax(scene);
}
}
}

Заменяем на
// Движущиеся объекты в слайдере
function sliderObj() {
// Parallax
var itemLi = $('#slideshow ul li');
itemLi.has('img[title="element1"]').find('img').attr("data-depth","0.15").addClass('layer');
itemLi.has('img[title="element2"]').find('img').attr("data-depth","0.20").addClass('layer');
itemLi.has('img[title="element3"]').find('img').attr("data-depth","0.10").addClass('layer');
itemLi.has('img[title="element4"]').find('img').attr("data-depth","0.20").addClass('layer');
itemLi.has('img[title="element5"]').find('img').attr("data-depth","0.80").addClass('layer');
itemLi.has('img[title="element6"]').find('img').attr("data-depth","0.90").addClass('layer');
if($(window).width() > 768) {
checkScene = $('body #slideshow');
if (checkScene.length) {
scene = document.getElementById('slideshow');
var parallax = new Parallax(scene);
}
}
}



Редактриуем main.css
Находим
/*** Слайдер ***/
#slideshow {position: relative;background: #fff9e8;padding-bottom: 90px;}
#slider {margin-bottom: 30px;position: relative;}
#slider ul {margin: 0;padding: 0;text-align: center;list-style: none;}
#slider ul li .item-html {position: absolute;top: 30%;left: 0;text-align: right;width: 100%;z-index: 9;}
#slider ul li .item-html .container {position: relative;}
#slider ul li h2, #slider ul li h3 {font-size: 58px;color: #000;letter-spacing: 2px;line-height: inherit;}
#slider ul li h2 {margin-bottom: 15px;}
#slider ul li.slider-item-1 {display: inline-block;}
#slider ul li.slider-item-1 img {max-width: 100%;height: auto;}
#slider ul li img.layer {position: absolute;z-index: 10;}
#slider ul li img[title="element1"] {top: 50%;left: auto;right: 7%;}
#slider ul li img[title="element2"] {bottom: -10%;left: auto;right: 10%;}
#slider ul li img[title="element3"] {top: -6%;left: 9%;}
#slider ul li img[title="element4"] {top: 37%;left: 8%;}
#slider ul li img[title="element5"] {bottom: -10%;left: 3%;}
#slider ul li img[title="element6"] {top: -40%;right: -5%;}
#slider .text-border .button {margin-top: 20px;}
Заменяем на
/*** Слайдер ***/
#slideshow {position: relative;background: #fff9e8;padding-bottom: 120px;margin-bottom: 6px;}
#slideshow .owl-carousel .owl-stage {text-align: center;}
#slideshow #slider .item-html {position: absolute;top: 30%;left: 0;text-align: right;width: 100%;z-index: 9;}
#slideshow #slider .item-html .container {position: relative;}
#slideshow #slider h2, #slideshow #slider h3 {font-size: 58px;color: #000;letter-spacing: 2px;line-height: inherit;}
#slideshow #slider h2 {margin-bottom: 15px;}
#slideshow #slider .slider-item-1 {display: inline-block;}
#slideshow #slider .slider-item-1 img {max-width: 100%;height: auto;}
#slideshow ul {margin: 0;padding: 0;text-align: center;list-style: none;}
#slideshow ul li img.layer {position: absolute;z-index: 10;}
#slideshow ul li img[title="element1"] {top: 50%;left: auto;right: 7%;}
#slideshow ul li img[title="element2"] {bottom: -10%;left: auto;right: 10%;}
#slideshow ul li img[title="element3"] {top: -6%;left: 9%;}
#slideshow ul li img[title="element4"] {top: 37%;left: 8%;}
#slideshow ul li img[title="element5"] {bottom: -10%;left: 3%;}
#slideshow ul li img[title="element6"] {top: -40%;right: -5%;}
#slideshow .text-border .button {margin-top: 20px;}
#slideshow .owl-controls {position: relative;margin-top: -24px;}
#slideshow .owl-theme .owl-dots {text-align: center;-webkit-tap-highlight-color: transparent;}
#slideshow .owl-theme .owl-dots .owl-dot {display: inline-block;zoom: 1;}
#slideshow .owl-carousel .owl-dot {cursor: pointer;cursor: hand;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#slideshow .owl-theme .owl-dots .owl-dot span {display: block;width: 10px;height: 10px;margin: 5px 7px;background: #c1c1c1;-webkit-backface-visibility: visible;transition: opacity .2s ease;border-radius: 30px;}
#slideshow .owl-theme .owl-dots .owl-dot.active span, #slideshow .owl-theme .owl-dots .owl-dot:hover span {background: #fff9e8;}

Находим
#slider ul li h2 {font-size: 60px;}
#slider ul li.slider-item-1 {display: block;}
#slider ul li img.layer {display: none;}
#slider ul li .item-html {text-align: center;}
Заменяем на
#slideshow #slider h2 {font-size: 60px;}
#slideshow #slider .slider-item-1 {display: block;}
#slideshow #slider .item-html {text-align: center;}
#slideshow ul li img.layer {display: none;}

Находим
#slideshow {padding-bottom: 0;}
#slider {margin: 0;}
#slider ul li h2, #slider ul li h3 {font-size: 48px;}
#slider ul li.slider-item-1 img {display: block;}
#slider ul li img {display: none;}
#slider ul li .item-html {top: 10%;z-index: 1;padding: 20px;}
Заменяем на
#slideshow {padding-bottom: 0;margin: 0;}
#slideshow #slider h2, #slideshow #slider h3 {font-size: 48px;}
#slideshow #slider .slider-item-1 img {display: block;}
#slideshow ul li img {display: none;}
#slideshow ul li .item-html {top: 10%;z-index: 1;padding: 20px;}

Находим
#slider ul li h2, #slider ul li h3 {font-size: 36px;}
#slider .text-border {padding-bottom: 30px;}
Заменяем на
#slideshow #slider h2, #slideshow #slider h3 {font-size: 36px;}
#slideshow .text-border {padding-bottom: 30px;}

Находим
#slider .text-border {border-bottom: 0;padding: 0;}
#slider .text-border:before, #slider .text-border:after, #slider .text-border h2:before, #slider .text-border h2:after, #slider ul li h3 {display: none;}
Заменяем на
#slideshow .text-border {border-bottom: 0;padding: 0;}
#slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}

Находим
#slider ul li h2 {display: none;}
Заменяем на
#slideshow #slider h2 {display: none;}


#2 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 08 Июнь 2017 - 14:42

Добрый день выполнил в точности как описано в этой теме после чего у меня тварился хаус)))). Перепроверял несколько раз.
На картинке показал что я хочу вместо фото слайды
заранее спасибо

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

  • Безымянный.jpg


#3 Ирина345

Ирина345

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

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

Отправлено 08 Июнь 2017 - 17:44

Просмотр сообщенияbscgroup (08 Июнь 2017 - 14:42) писал:

Добрый день выполнил в точности как описано в этой теме после чего у меня тварился хаус)))). Перепроверял несколько раз.
На картинке показал что я хочу вместо фото слайды
заранее спасибо
Здравствуйте, Вам внесли изменения на сайт согласно инструкции выше и создали бекап.

#4 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 08 Июнь 2017 - 18:53

И выглядит теперь все как будто атомную бомбу разорвало)))))

#5 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 16 Июнь 2017 - 08:26

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

Установите пожалуйста слайдер или пришлите скриншот с результатом и подробным указанием, что необходимо исправить.

#6 EvgenyMSK

EvgenyMSK

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений
  • ГородМосковская обл., г. Люберцы

Отправлено 17 Январь 2019 - 11:24

Требуется помощь. На главной странице был установлен слайдер как в теме ВЕГАН. По каким то причинам слайды не раскрывались как было задумано в данном слайдере. Я сменил по инструкции на Флексслайдер. Но по каким то непонятным для меня причинам не установился новый и не удалился старый слайдер. К тому же он съехал немного вниз от строки поиска и перестала работать автопрокрутка слайдов по замкнутому кругу. Помогите исправить данный косяк в коде. Сил нет бороться с ним :wacko:

#7 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 18 Январь 2019 - 00:50

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите и удалите:
{% IF index_page %}
	 <div class="demo-2">
		  <div id="slider" class="sl-slider-wrapper">
		<div class="sl-slider">
		 <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
		  <div class="sl-slide-inner first-slide">
		   <div class="bg-img bg-img-1"></div>
		   <h2></h2>
			<blockquote>
			 <p></p>
			</blockquote>
		  </div>
		 </div>
		 <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
		  <div class="sl-slide-inner second-slide">
		   <div class="bg-img bg-img-2"></div>
		   <h2></h2>
		   <blockquote>
			 <p></p>
			 </blockquote>
		  </div>
		 </div>
		 <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
		  <div class="sl-slide-inner third-slide">
		   <div class="bg-img bg-img-3"></div>
		   <h2></h2>
			<blockquote>
			 <p></p>
			</blockquote>
		  </div>
		 </div>
		</div><!-- /sl-slider -->
			<div class="slider_nav">
			 <nav id="nav-arrows" class="nav-arrows">
			  <span class="nav-arrow-prev"><span class="fa fa-long-arrow-left"></span></span>
			  <span class="nav-arrow-next"><span class="fa fa-long-arrow-right"></span></span>
			 </nav>
			</div>
	   </div><!-- /slider-wrapper -->
	 </div>
		<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.slitslider.js"></script>
	   <script type="text/javascript">
			 $(function() {
			
			  var Page = (function() {
		 
			   var $navArrows = $( '#nav-arrows' ),
				$nav = $( '#nav-dots > span' ),
				slitslider = $( '#slider' ).slitslider( {
				 onBeforeChange : function( slide, pos ) {
		 
				  $nav.removeClass( 'nav-dot-current' );
				  $nav.eq( pos ).addClass( 'nav-dot-current' );
		 
				 }
				} ),
		 
				init = function() {
		 
				 initEvents();
				
				},
				initEvents = function() {
		 
				 // add navigation events
				 $navArrows.children( ':last' ).on( 'click', function() {
		 
				  slitslider.next();
				  return false;
		 
				 } );
		 
				 $navArrows.children( ':first' ).on( 'click', function() {
				 
				  slitslider.previous();
				  return false;
		 
				 } );
		 
				 $nav.each( function( i ) {
				
				  $( this ).on( 'click', function( event ) {
				  
				   var $dot = $( this );
				  
				   if( !slitslider.isActive() ) {
		 
					$nav.removeClass( 'nav-dot-current' );
					$dot.addClass( 'nav-dot-current' );
				  
				   }
				  
				   slitslider.jump( i + 1 );
				   return false;
				 
				  } );
				 
				 } );
		 
				};
		 
				return { init : init };
		 
			  })();
		 
			  Page.init();
		 
			  /**
			   * Notes:
			   *
			   * example how to add items:
			   */
		 
			  /*
			 
			  var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
			 
			  // call the plugin's add method
			  ss.add($items);
		 
			  */
			
			 });
			</script>
	{% ENDIF %}   

далее найдите:
	 <!-- Запуск слайдера -->
<script>
		$(window).load(function() {
				$(".flexslider").flexslider({
						animation: "slide"
				});
		});
</script>
<!-- flexslider слайдер который отображается на главной -->
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" alt="" /></a>
</li>
</ul>
</div>

переместите его, поставив после:
			</div>
			<!-- /END Заголовок страницы -->
<div class="search_block_body">
			   <form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину">
				<input type="hidden" name="goods_search_field_id" value="0">
				<input type="text" name="q" value="{SEARCH_QUERY}" class="search-string" placeholder="Поиск по магазину..." autocomplete="off">
				<button type="submit" title="Искать" class="icon-search search-submit"></button>
			  </form>
			</div>


#8 EvgenyMSK

EvgenyMSK

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений
  • ГородМосковская обл., г. Люберцы

Отправлено 18 Январь 2019 - 01:27

Просмотр сообщенияVaccina (18 Январь 2019 - 00:50) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите и удалите:
[CODE]
{% IF index_page %}
<div class="demo-2">
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner first-slide">
<div class="bg-img bg-img-1"></div>
<h2></h2>
<blockquote>
Большое спасибо! Всё получилось)





Темы с аналогичным тегами Слайдер, Слайдер на главной, Новогодний, Слайдер для шаблона, Слайдер шаблона новогодний, Новогодний слайдер

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

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