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


Слайдер Для Мобильной Версии

Автор apzagro, 09 апр. 2023 13:37

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

#1 apzagro

apzagro

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 09 Апрель 2023 - 13:37

Добрый день!
Интересует возможность размещения слайдера именно только для мобильной версии - то есть для вэб-версии свои (как они есть) остаются без изменений, а для мобильной версии нужно разместить собственные слайдеры. Меня интересовал бы один слайдер для всех страниц мобильной версии.

#2 Vaccina

Vaccina

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

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

Отправлено 11 Апрель 2023 - 08:39

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

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

#3 apzagro

apzagro

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 13 Апрель 2023 - 08:07

Просмотр сообщенияVaccina (11 Апрель 2023 - 08:39) писал:

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

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

Добрый день! Расположение - фон, где карусель (slide1-slide4) на главной и на том же месте баннер на остальных страницах сайта. Нужно заменить на статичный баннер на всех страницах мобильной версии. Файл - slide_mob.jpg

https://disk.yandex..../sZjHIp9WPZ-X2g

#4 Vaccina

Vaccina

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

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

Отправлено 18 Апрель 2023 - 01:03

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

Чтобы слайдер отображался на всех страницах зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
	  <!-- Главная страница -->
	  {% IF index_page %}
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->
 
	  {% ENDIF %}
    
замените на:
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->

К сожалению, данный слайдер не поддерживает отображение разных браузеров в зависимости от разрешения\устройства, могу предложить установить вместо него иной виджет слайдера, пример:
https://techno-demo.storeland.ru/

Такой вариант вас устроит?

#5 apzagro

apzagro

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 19 Апрель 2023 - 10:42

Просмотр сообщенияVaccina (18 Апрель 2023 - 01:03) писал:

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

Чтобы слайдер отображался на всех страницах зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
	 <!-- Главная страница -->
	 {% IF index_page %}
	 <div class="fluid-container">
	 <div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		 <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		 </div>
		 <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		 </div>
	 </div><!-- #camera_wrap_1 -->
	 <div class="clear"></div>
	 </div><!-- .fluid_container -->

	 {% ENDIF %}

замените на:
	 <div class="fluid-container">
	 <div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		 <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		 </div>
		 <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		 </div>
	 </div><!-- #camera_wrap_1 -->
	 <div class="clear"></div>
	 </div><!-- .fluid_container -->

К сожалению, данный слайдер не поддерживает отображение разных браузеров в зависимости от разрешения\устройства, могу предложить установить вместо него иной виджет слайдера, пример:
https://techno-demo.storeland.ru/

Такой вариант вас устроит?

Добрый день!
Вариант с приведенным вами иным виджетом слайдера (как в демо) более интересен. Как это осуществить?

#6 Vaccina

Vaccina

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

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

Отправлено 21 Апрель 2023 - 04:55

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
		 <div class="fluid-container">
				<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
				 <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
				 </div>
				 <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
				 </div>
				</div><!-- #camera_wrap_1 -->
				<div class="clear"></div>
		 </div><!-- .fluid_container -->
  
замените на:
			<!-- Слайдшоу-->
			<div id="slideshow" >
			 <div class="preloader"><span class="content-loading"></span></div>
			 <div class="slider owl-carousel">
				<!-- Слайд 1 -->
				<div class="item" style="background-image: url({ASSETS_IMAGES_PATH}slide4.jpg)">
				 <a href="#">
					<div class="image">
					 <picture>
						<source class="owl-lazy" media="(max-width: 991px)" data-srcset="{ASSETS_IMAGES_PATH}slide-4-mobile.jpg">
						<img class="owl-lazy" data-src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="Слайд 1">
					 </picture>
					</div>
				 </a>
				</div>
				<!-- /Слайд 1 -->
				
				<!-- Слайд 2 -->
				<div class="item" style="background-image: url({ASSETS_IMAGES_PATH}slide4.jpg)">
				 <a href="#">
					<div class="image">
					 <picture>
						<source class="owl-lazy" media="(max-width: 991px)" data-srcset="{ASSETS_IMAGES_PATH}slide-4-mobile.jpg">
						<img class="owl-lazy" data-src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="Слайд 2">
					 </picture>
					</div>
				 </a>
				</div>
				<!-- /Слайд 2 -->

			 </div>
			</div>
			<!-- /Слайдшоу-->

Вместо slide4.jpg и slide-4-mobile.jpg укажите свои изображения(slide-4-mobile.jpg для мобильной версии)

Далее найдите и удалите:
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


далее найдите:
	{% IF index_page %}
	  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}camera.css?design=movement">
	  <script type='text/javascript' src='{ASSETS_JS_PATH}camera.min.js?design=movement'></script>
	  <script>
		  jQuery(function(){			  
				jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '600px',
			pagination: false,
					thumbnails: false,
			time: 3000
				});
			});
		</script>
	{% ENDIF %}

замените на:
 {% IF index_page %}
	 <script>
	 jQuery(function(){
// Слайдер на главной
var owlS = $('#slideshow .owl-carousel');
owlS.owlCarousel({
items: 1,
loop: true,
rewind: true,
lazyLoad: true,
nav: true,
navText: ["<i class='slideshow-nav fal fa-angle-left' aria-hidden='true'></i>", "<i class='slideshow-nav fal fa-angle-right' aria-hidden='true'></i>"],
dots: true,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 500,
dotsSpeed: 400,
mouseDrag: true,
touchDrag: true,
pullDrag: true
});
});
</script>
{% ENDIF %}

Далее зайдите в style.css - найдите:
.camera_wrap {height:600px !important;}
/* END Шапка */

после него вставьте:
/******************************************************************************
Owl Carousel v2.3.4
*******************************************************************************/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}


/*** Слайдер ***/
#slideshow {position: relative;min-height: 70px;}
#slideshow .item {position: relative;}
#slideshow .item .content {position: absolute;top: 35%;width: 100%;}
#slideshow .item:not(:first-child) {display:none;}
#slideshow .owl-loaded .item {display:block;}

#slideshow .item {height: 510px;background-size: cover;background-repeat: no-repeat;background-position: center}
#slideshow .item .image {display: none}
#slideshow .item a {display: block;height: 100%}
@media all and (max-width:991px) {#slideshow .item .image {display: block}
#slideshow .item {height: auto;background: 0 0!important}}
#slideshow .owl-dots {display: inline-block;position: absolute;top: auto;bottom: 25px;left: 50%;right: auto;width: auto;text-align: center;padding: 2px 2px;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;transform: translateX(-50%);-webkit-tap-highlight-color: rgba(0, 0, 0, 0);background-color: rgba(42,48,52,.5);opacity:0;}
#slideshow:hover .owl-dots {opacity:1;}
#slideshow .owl-dots .owl-dot {display: inline-block;zoom: 1;}
#slideshow .owl-dots .owl-dot span {display: block;position: relative;width: 8px;height: 8px;border-radius: 100%;background: #fff;margin: 0 2px;}
#slideshow .owl-dots .owl-dot.active span, #slideshow .owl-dots .owl-dot:hover span {background: #4c1e8b;}
#slideshow .owl-nav {height: 0;}
#slideshow .owl-nav .owl-prev, #slideshow .owl-nav .owl-next { position: absolute; z-index: 1; top: 50%; width: 50px; height: 50px; margin-top: -25px; font-size: 48px; line-height: 50px; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.15); cursor: pointer; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out}
#slideshow .owl-nav .owl-prev {left: 20px;}
#slideshow .owl-nav .owl-next {right: 20px;}
@media (max-width: 991px){
#slideshow .owl-dots {opacity:1;}
}
@media (max-width: 481px){
#slideshow .owl-nav .owl-prev {left: 0px;}
#slideshow .owl-nav .owl-next {right: 0px;}
}
#slideshow .owl-nav .owl-prev:hover {-webkit-transform: translateX(-5px);transform: translateX(-5px)}
#slideshow .owl-nav .owl-next:hover {-webkit-transform: translateX(5px);transform: translateX(5px)}


Далее зайдите в шаблон forall.js и в самое начало вставьте код из приложенного файла:
Прикрепленный файл  forall.txt   130,31К   30 Количество загрузок:

#7 apzagro

apzagro

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 21 Апрель 2023 - 10:27

Просмотр сообщенияVaccina (21 Апрель 2023 - 04:55) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
[КОД] <div class="fluid-container">
<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
<div data-thumb="{ASSETS_IMAGES_PATH}slide4 .jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
</div>
<div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg? design=motion">
</div>
</div><!-- #camera_wrap_1 -->


  
заменить на:
[КОД] <!-- Слайдшоу-->
<div id="slideshow" >
<div class="preloader"><span class="content-loading"></span></div>
<div class="slider owl-carousel">
<!-- Слайд 1 -->
<div class="item" style="background-image: url({ASSETS_IMAGES_PATH}slide4.jpg)">
<a href="#" >
<div class="image">
<picture>
<source class="owl-lazy" media="(max-width: 991px)" data-srcset="{ASSETS_IMAGES_PATH}slide-4-mobile.jpg"
> <img class="owl-lazy" data-src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="Слайд 1">
</picture>
</div>
</a>
</div>
<!-- /Слайд 1 -->

<!-- Слайд 2 -->
<div class="item" style="background-image: url ({ASSETS_IMAGES_PATH}slide4.jpg)">
<a href="#">
<div class="image">
<picture>
<source class="owl-lazy" media="(max-width: 991px)" данные -srcset="{ASSETS_IMAGES_PATH}slide-4-mobile.jpg">
<img class="owl-lazy" data-src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="Слайд 2">
</picture>
</div>
</a>
</div>
<!-- /Слайд 2 -->

</div>
</div>
<!-- /Слайдшоу--> [/CODE]

Вместо slide4.jpg и slide-4-mobile. jpg вычислить свои изображения(slide-4-mobile.jpg для мобильной версии)

Далее найдите и удалите:
[КОД] <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/ jquery/1.8.2/jquery.min.js"></script>[/CODE]


далее найдите: 
 {% IF index_page %} 
	 <link rel="stylesheet" type="text/css" href=" {ASSETS_STYLES_PATH}camera.css?design=movement"> 
	 <script type='text/javascript' src='{ASSETS_JS_PATH}camera.min.js?design=movement'></script> 
	 <script>
	 jQuery(function(){ 
jQuery('#camera_wrap_1').camera({ 
		 minHeight: '400px', 
		 maxHeight: '600px', 
		 нумерация страниц: false, 
эскизы: false, 
		 время: 3000 
}); 
}); 
</script> 
{% ENDIF %}


заменяется на: 
 {% IF index_page %} 
	 <script> 
	 jQuery(function(){ 
// Слайдер на главную 
var owlS = $('#slideshow .owl- carousel'); 
owlS.owlCarousel({ 
items: 1, 
loop: true, 
rewind: true, 
lazyLoad: true, 
nav: true,
navText: ["<i class='slideshow-nav fal fa-angle-left' aria-hidden='true'></i>", "<i class='slideshow-nav fal fa-angle-right' aria -hidden='true'></i>"], 
dots: true, 
autoplay: true, 
autoplayHoverPause: true, 
smartSpeed: 500, 
dotsSpeed: 400, 
mouseDrag: true, 
touchDrag: true, 
pullDrag: true 
}); 
}); 
</script> 
{% ENDIF %}


Далее зайдите в style.css - найдите: 
.camera_wrap {height:600px !important;} 
/* END Шапка */


после того, как его вложите:
[ КОД]/*********************************************** *******************************
Сова Карусель v2.3.4
******************************************************* *******************************/
.owl-carousel, .owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}. owl-carousel .owl-stage{позиция:относительная;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content :".";отображение:блок;очистить:оба;видимость:скрытый;высота строки:0;высота:0}.owl-carousel .owl-stage-outer{позиция:относительная;переполнение:скрыто;-webkit-transform :translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface -visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl- карусель .owl-item {минимальная высота: 1 пиксель; с плавающей запятой: слева; - webkit-backface-visibility: скрыто; - webkit-touch-выноска: нет}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{disabled{display:none}.no-js .owl -carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev {курсор:указатель;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl- карусель .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding: 0!важно;шрифт:наследовать}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item {видимость: скрыт}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user -выбрать: нет;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{курсор:переместить;курсор:захватить}.owl-carousel.owl-rtl{направление:rtl}.owl-carousel. owl-rtl .owl-item {float: right} .owl-carousel .animated {продолжительность анимации: 1 с; режим заполнения-анимации: оба} .owl-carousel .owl-animated-in {z-index: 0} .owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{имя-анимации:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}. owl-height{transition:height .5s easy-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s easy}.owl-carousel .owl-item .owl- ленивый: не ([src]). -style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height :80px;ширина:80px;слева:50%;сверху:50%;поле-слева:-40px;сверху-поля:-40px;фон:url(owl.video.play.png) без повтора;курсор:указатель;z-индекс: 1;-webkit-backface-visibility:hidden;transition:transform .1s easy}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3 ,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl -video-tn{непрозрачность:0;высота:100%;позиция фона:центр по центру;повтор фона:без повтора;размер фона:содержать;переход:непрозрачность .4s легкость}.owl-carousel .owl-video -кадр{позиция:относительная;z-индекс:1;высота:100%;ширина:100%}сова-видео-игра-значок: hover {- ms-transform: масштаб (1.3, 1.3); преобразование: масштаб (1.3, 1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background- повтор: нет повтора; размер фона: содержать; переход: непрозрачность .4s легкость}.owl-carousel .owl-video-frame {позиция: относительная; z-индекс: 1; высота: 100%; ширина: 100%}сова-видео-игра-значок: hover {- ms-transform: масштаб (1.3, 1.3); преобразование: масштаб (1.3, 1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background- повтор: нет повтора; размер фона: содержать; переход: непрозрачность .4s легкость}.owl-carousel .owl-video-frame {позиция: относительная; z-индекс: 1; высота: 100%; ширина: 100%}ширина:100%}ширина:100%}


/*** Слайдер ***/
#слайдшоу {позиция: относительная;минимальная высота: 70px;}
#слайдшоу .item {позиция: относительная;}
#слайдшоу .item .content {позиция: абсолютная;верх: 35%;ширина : 100%;}
#slideshow .item:not(:first-child) {display:none;}
#slideshow .owl-loaded .item {display:block;}

#slideshow .item {height: 510px;background-size: обложка; повтор фона: нет повтора; положение фона: центр}
#slideshow .item .image {display: none}
#slideshow .item a {display: block;height: 100%}
@media all and (max-width :991px) {#slideshow .item .image {display: block}
#slideshow .item {height: auto;background: 0 0!важно}}
#slideshow .owl-dots {отображение: встроенный блок; положение: абсолютное; верх: авто; низ: 25 пикселей; слева: 50%; справа: авто; ширина: авто; выравнивание текста: по центру; отступы: 2 пикселя 2 пикселя; - webkit-user-select: нет; -khtml-user-select: нет; -moz-user-select: нет; -ms-user-select: нет; user-select: нет; преобразование: translateX (-50%); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgba(42,48,52,.5);opacity:0;} #slideshow:hover .owl-dots
{ opacity:1;}
#slideshow .owl-dots .owl-dot {display: inline-block;zoom: 1;}
#slideshow .owl-dots .owl-dot span {display: block;position: relative;width: 8px ;высота: 8px;радиус границы: 100%;фон: #fff;поле: 0 2px;}
#slideshow .owl-dots .owl-dot.active span, #slideshow .owl-dots .owl-dot:hover span {фон: #4c1e8b;}
#слайдшоу .owl-nav {высота: 0;}
#slideshow .owl-nav .owl-prev, #slideshow .owl-nav .owl-next { position: absolute; z-индекс: 1; верх: 50%; ширина: 50 пикселей; высота: 50 пикселей; верхнее поле: -25px; размер шрифта: 48px; высота строки: 50px; выравнивание текста: по центру; цвет: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.15); курсор: указатель; переход: -webkit-transform .2s easy-in-out; переход: преобразование .2s облегчение входа-выхода; переход: преобразование .2s easy-in-out,-webkit-transform .2s easy-in-out}
#slideshow .owl-nav .owl-prev {left: 20px;}
#slideshow .owl-nav .owl-next { справа: 20px;}
@media (максимальная ширина: 991px){
#slideshow .owl-dots {opacity:1;}
}
@media (max-width: 481px){
#slideshow .owl-nav .owl-prev {left : 0px;}
#slideshow .owl-nav .owl-next {справа: 0px;}
}
#slideshow .owl-nav .owl-prev:hover {-webkit-transform: translateX(-5px);transform: translateX(-5px)}
#slideshow .owl-nav .owl-next:hover {-webkit-transform: translateX(5px);transform: translateX(5px)}[/CODE]


Далее зайдите в шаблон forall.js и в самое начало вставьте код из приложенного файла:
Прикрепленный файл forall.txt


Итог - На сайте есть 1 JS ошибка. Сообщение появляется после вставки данных из forall.txt.

#8 Vaccina

Vaccina

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

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

Отправлено 22 Апрель 2023 - 07:20

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

Проблема в отсутствии подключения для всплывающего окна fancybox, зайдите в раздел Сайт - Редактор шаблонов - forall.js - в самом конце вставьте код из файла:
Прикрепленный файл  fancybox.txt   22,64К   25 Количество загрузок:

#9 apzagro

apzagro

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 23 Апрель 2023 - 10:09

Просмотр сообщенияVaccina (22 Апрель 2023 - 07:20) писал:

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

Проблема в отсутствии подключения для всплывающего окна fancybox, зайдите в раздел Сайт - Редактор шаблонов - forall.js - в самом конце вставьте код из файла:
Прикрепленный файл fancybox.txt

Добрый день!
Спасибо за помощь - получилось даже немного лучше, чем рассчитывал...
Только уточнение - можно убрать в мобильной версии переключатель между слайдерами... Мешает...

https://drive.google...iew?usp=sharing

#10 Vaccina

Vaccina

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

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

Отправлено 25 Апрель 2023 - 01:59

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

Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
#slideshow .owl-dots {display: inline-block;position: absolute;top: auto;bottom: 25px;left: 50%;right: auto;width: auto;text-align: center;padding: 2px 2px;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;transform: translateX(-50%);-webkit-tap-highlight-color: rgba(0, 0, 0, 0);background-color: rgba(42,48,52,.5);opacity:0;}

замените на:
#slideshow .owl-dots {display: inline-block;position: absolute;top: auto;bottom: 25px;left: 50%;right: auto;width: auto;text-align: center;padding: 2px 2px;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;transform: translateX(-50%);-webkit-tap-highlight-color: rgba(0, 0, 0, 0);background-color: rgba(42,48,52,.5);opacity:0;}
@media all and (max-width:991px) {#slideshow .owl-dots{display: none;}}

#11 apzagro

apzagro

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 25 Апрель 2023 - 18:50

Огромное спасибо!
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Движение
  5. → Изменение общей стилистики
  6. Privacy Policy