UGIN (22 Январь 2016 - 12:59) писал:
как можно страницу "умный дом"подогнать под мобильную версию вот в таком виде:
2блок- сделать каруселью, чтобы на экране отображался один товар, и можно было его перелистывать.
4, 5 и 6 блок- сделать каруселью с возможностью перелистывания. что бы эти карусели стояли друг под другом.
спасибо.
Здравствуйте, что бы добавить карусель, откройте редактор данной страницы и при помощи кнопки "Источник" откройте код описания и замените его полностью на код ниже.
<br />
<img alt="" class="banner1" src="http://st.storeland.net/12/1797/204/.png" style="width: 100% !important;" /> <img alt="" class="banner2" src="http://st.store-ip.ru/12/1810/109/vdv.png" title="" />
<div style="text-align: center;">
<h1><strong><span style="font-size:26px;">ВЫБЕРИТЕ КОМПЛЕКТ</span></strong></h1>
<section class="slider">
<div class="flexslider carousel">
<ul class="slides">
<li><img src="http://st.store-ip.ru/8/1798/285/komplekt-jpg.jpg" /></li>
<li><img src="http://st.store-ip.ru/8/1797/314/ilo-jpg.jpg" /></li>
<li><img src="http://st.store-ip.ru/8/1798/284/komple-jpg.jpg" /></li>
<li><img src="http://st.store-ip.ru/7/1798/298/kit_base5.jpg" /></li>
<li><img src="http://st.store-ip.ru/8/1798/285/komplekt-jpg.jpg" /></li>
<li><img src="http://st.store-ip.ru/8/1797/314/ilo-jpg.jpg" /></li>
<li><img src="http://st.store-ip.ru/8/1798/284/komple-jpg.jpg" /></li>
<li><img src="http://st.store-ip.ru/7/1798/298/kit_base5.jpg" /></li>
</ul>
</div>
</section>
<table border="1" cellpadding="1" cellspacing="1" style="width:1150px;">
<tbody>
<tr>
<td style="width: 500px;">
<h1>Управляйте системой с<br />
мобильных устройств</h1>
<span style="color: rgb(77, 92, 103); font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 17px; background-color: rgb(243, 249, 251);">"Умное" решение сочетает в себе безопасность дома,<br />
управление комфортом и видеомониторинг,<br />
чтобы соответствовать вашему образу жизни.</span><br />
<br />
<a href="https://itunes.apple.com/ru/app/umnyj-dom-rosohrana/id1001833862?mt=8&ign-mpt=uo%3D2" target="_blank"><img alt="" src="http://st.store-ip.ru/6/1797/625/appstore.png" style="width: 150px; height: 47px;" /></a> <a href="https://play.google.com/store/apps/details?id=com.likwi.suro" target="_blank"><img alt="" src="http://st.store-ip.ru/9/1797/626/google-play1.png" style="width: 150px; height: 45px;" /></a></td>
<td><iframe allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/9l4dhLeWDos" width="560"></iframe></td>
</tr>
</tbody>
</table>
<h1><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:26px;">"УМНОЕ" РЕШЕНИЕ<br />
<img alt="" src="http://st.store-ip.ru/7/1799/144/.png" style="width: 1150px; height: 359px;" /><br />
<span style="line-height: 1.2em;"> </span><span style="line-height: 1.2em;"><strong>В ОБСЛУЖИВАНИЕ ВХОДИТ</strong></span></span></span></h1>
<img alt="" src="http://st.storeland.net/12/1797/205/.png" style="opacity: 0.9; line-height: 18.2px; width: 1150px; height: 359px;" /></div>
<div class="ui-text-intro" style="box-sizing: border-box; margin: 0px; padding: 0px; font-size: 12px; direction: ltr; font-family: 'Open Sans', sans-serif; line-height: 17px; color: rgb(77, 92, 103); text-align: center; background-color: rgb(255, 255, 255);"><br />
</div>
<table border="1" cellpadding="1" cellspacing="1" style="width: 100% !important;">
<tbody>
<tr>
<td align="center"><a href="http://st.store-ip.ru/12/1798/622/oferta.pdf" target="_blank"><img alt="" src="http://st.store-ip.ru/8/1798/619/S122x122.jpg" style="width: 122px; height: 122px;" /></a></td>
<td align="center"><a href="http://st.store-ip.ru/6/1798/641/lic.pdf"><img alt="" src="http://st.store-ip.ru/8/1798/619/S122x122.jpg" style="width: 122px; height: 122px;" /></a></td>
</tr>
<tr>
<td align="center"><a href="http://st.store-ip.ru/12/1798/622/oferta.pdf" style="line-height: 18.2px; text-align: -webkit-center;" target="_blank">Оферта на обслуживание</a></td>
<td align="center"><a href="http://st.store-ip.ru/6/1798/641/lic.pdf" style="line-height: 18.2px; text-align: -webkit-center;" target="_blank">Лицензии</a></td>
</tr>
</tbody>
</table>
<br />
<br />
Далее найдите в шаблоне HTML
<!-- Запуск слайдера -->
{% IF index_page %}
<script>
$(function(){ slideShow()});
</script>
{% ENDIF %}
после вставьте
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}flexslider.css">
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>
<script type="text/javascript">
(function() {
// store the slider in a local variable
var $window = $(window),
flexslider = { vars:{} };
// tiny helper function to add breakpoints
function getGridSize() {
return (window.innerWidth < 600) ? 2 :
(window.innerWidth < 900) ? 3 : 4;
}
$window.load(function() {
$('.flexslider').flexslider({
animation: "fide",
animationSpeed: 400,
slideshowSpeed: 7000,
move: 1,
animationLoop: true,
slideshow: true,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(), // use function to pull in initial value
maxItems: getGridSize(), // use function to pull in initial value
start: function(slider){
$('body').removeClass('loading');
flexslider = slider;
}
});
});
// check grid size on resize event
$window.resize(function() {
var gridSize = getGridSize();
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
}());
</script>
в конец файла font-awesome.min.css добавьте
.flex-direction-nav a:before {
font-family: "FontAwesome" !important;
font-size: 40px;
display: inline-block;
content: '\f053' !important;;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f054' !important;;
}
и загрузите в раздел Сайт-Редактор шаблонов файлы jquery.flexslider.js и flexslider.css
блоки 4 и 5 у Вас изображения не совсем понятно как из них создать карусель..