Opencart 1.5.5.1 Nivo Slider

[dojer]

Привет! Кто-нибудь настраивал стандартный Слайд-шоу (Nivo Slider) под мобильные устройства? Дело в том что, когда включаешь баннеры - всё ок, а когда модуль слайд-шоу - он вылазит за рамки и растягивает по горизонтали сайт. Как сделать, чтобы он ресайзился под моб устройства? Человек, которй делал адаптивный шаблон сказал, что этот слайдер через js подставляет размеры и адаптировать его не выйдет, так ли это?

 

/*
 * jQuery Nivo Slider v2.5.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
/* The Nivo Slider styles */
.nivoSlider {
	position: relative;
}
.nivoSlider img {
	position: absolute;
	top: 0px;
	left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	z-index: 6;
	display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:8;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
	display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}
/* slider theme */

.slideshow .nivoSlider {
	position: relative;
	background: #fff url('../image/loading.gif') no-repeat 50% 50%;	
	margin-bottom: 20px;
}
.slideshow .nivoSlider img {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}
.slideshow .nivoSlider a {
	border: 0;
	display: block;
}
.slideshow .nivo-controlNav {
	position: absolute;
	right: 10px;
	bottom: 5px;
	text-align: center;
	height: 22px;
	z-index: 99;
}
.slideshow .nivo-controlNav a {
	vertical-align: top;
	display: block;
	width: 22px;
	height: 22px;
	background: url('../image/bullets.png') no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.slideshow .nivo-controlNav a.active {
	background-position:0 -22px;
}
.slideshow .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url('../image/arrows.png') no-repeat;
	text-indent:-9999px;
	border:0;
}
.slideshow a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.slideshow a.nivo-prevNav {
	left:15px;
}
.slideshow .nivo-caption {
	text-shadow:none;
	font-family: Helvetica, Arial, sans-serif;
}
.slideshow .nivo-caption a {
	color:#efe9d1;
	text-decoration:underline;
}

<div class="slideshow">
  <div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
    <?php foreach ($banners as $banner) { ?>
    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
    <?php } ?>
    <?php } ?>
  </div>
</div>
<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider();
});
--></script>

 

[Dimasscus]

вы не думали обновить опенкарт?

по теме-все там решаемо

[dojer]

9 часов назад, Dimasscus сказал:

вы не думали обновить опенкарт?

по теме-все там решаемо

 

Пока нет. А как решаемо?

[Dimasscus]

2 минуты назад, dojer сказал:

 

Пока нет. А как решаемо?

стилями и правкой js

[KomissarJuve]

19 часов назад, dojer сказал:

Привет! Кто-нибудь настраивал стандартный Слайд-шоу (Nivo Slider) под мобильные устройства? Дело в том что, когда включаешь баннеры - всё ок, а когда модуль слайд-шоу - он вылазит за рамки и растягивает по горизонтали сайт. Как сделать, чтобы он ресайзился под моб устройства? Человек, которй делал адаптивный шаблон сказал, что этот слайдер через js подставляет размеры и адаптировать его не выйдет, так ли это?

 

 

можно попробовать другое слайдшоу

[dojer]

2 часа назад, Dimasscus сказал:

стилями и правкой js

 

платно Вы имеете ввиду? большой объём работы? не получится просто самостоятельно пару строчек подправить?

[Dimasscus]

22 минуты назад, dojer сказал:

 

платно Вы имеете ввиду? большой объём работы? не получится просто самостоятельно пару строчек подправить?

если есть знания- получится. если нет- то создайте тему в услугах- найдется исполнитель

[Dimasscus]

ссылку на сайт напишите

[dojer]

3 часа назад, Dimasscus сказал:

если есть знания- получится. если нет- то создайте тему в услугах- найдется исполнитель

 

а в каких строках копать хоть примерно?

 

3 часа назад, Dimasscus сказал:

ссылку на сайт напишите

 

в личку написал

[dojer]

Попробовал переделать под flexslider  по вот этой шпаргалке https://seo-cheats.blogspot.com/2013/02/opencart.html

 

В принципе работает, но не подгружается навигация, в стилях есть а стрелки не отображаются...

Змінено 13 січня 2021 користувачем dojer

[dojer]

1 час назад, dojer сказал:

Попробовал переделать под flexslider  по вот этой шпаргалке https://seo-cheats.blogspot.com/2013/02/opencart.html

 

В принципе работает, но не подгружается навигация, в стилях есть а стрелки не отображаются...

 

Видимо проблема была в CSS, взял другие стили, из другой версии FlexSlider и появилась навигация. Всем спасибо.