Изменение Слайдера
#1
Отправлено 10 Февраль 2016 - 21:35
#2
Отправлено 11 Февраль 2016 - 04:49
<div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /> </div>
приведите ее к следующему виду:
<div><a href="ссылка"> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /> </a> </div>
другие баннеры изменяйте по аналогии
#3
Отправлено 11 Февраль 2016 - 09:55
...по поводу flex-а, было востановление ил бэкапа поэтому Вы изменений не заметили.Сейчас сделал еще раз все, что делал вчера, а именно:
в раздел скрипты была удалена строка
<script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=orange"></script>
и вставлен код
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css">
<script src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
вместо этого кода
<div u="slides" class="slides_container">
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
</div>
</div>
</div>
</div>
{% ENDIF %}
вставлен этот
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide3.png" />
</li>
</ul>
</div>
#4
Отправлено 11 Февраль 2016 - 10:49
kdi45 (11 Февраль 2016 - 09:55) писал:
...по поводу flex-а, было востановление ил бэкапа поэтому Вы изменений не заметили.Сейчас сделал еще раз все, что делал вчера, а именно:
в раздел скрипты была удалена строка
<script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=orange"></script>
и вставлен код
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css">
<script src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
вместо этого кода
<div u="slides" class="slides_container">
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
</div>
</div>
</div>
</div>
{% ENDIF %}
вставлен этот
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide3.png" />
</li>
</ul>
</div>
Здравствуйте.
Создали Вам новый бэкап (11.02.2016 10:05:02) и внесли поправки для установленного Flex слайдера.
Проверьте, пожалуйста.
#5
Отправлено 11 Февраль 2016 - 12:06
...изображение автоматически не меняется
#6
Отправлено 11 Февраль 2016 - 14:17
kdi45 (11 Февраль 2016 - 12:06) писал:
...изображение автоматически не меняется
<!-- Запуск слайдера --> {% IF index_page %} <script> $(function(){ slideShow()}); </script> {% ENDIF %}
далее найдите
{% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="{ASSETS_IMAGES_PATH}slide1.png" /> </li> <li> <img src="{ASSETS_IMAGES_PATH}slide2.png" /> </li> <li> <img src="{ASSETS_IMAGES_PATH}slide3.png" /> </li> </ul> </div> </div> </div> {% ENDIF %}
замените на
{% IF index_page %} <div class="container"> <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="{ASSETS_IMAGES_PATH}slide1.png" /> </li> <li> <img src="{ASSETS_IMAGES_PATH}slide2.png" /> </li> <li> <img src="{ASSETS_IMAGES_PATH}slide3.png" /> </li> </ul> </div> </div> </div> </div> {% ENDIF %}
далее найдите в файле main.css
#slideshow {margin: 0 0;position: relative;} #slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 570px; overflow: hidden;z-index:1;}и удалите
далее найдите и удалите
#breadcrumbs, #product-next-pre, .container-slider .page-title-slider, #main_left .block-title, .success, #slideshow { background: #f79242; background: -moz-linear-gradient(left, #fb7e3e 0%, #ac2c77 160%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fb7e3e), color-stop(160%,#ac2c77)); background: -webkit-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%); background: -o-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%); background: -ms-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%); background: linear-gradient(to right, #fb7e3e 0%,#ac2c77 160%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7e3e', endColorstr='#ac2c77',GradientType=1 ); }
далее найдите в файле flexslider.css
.flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; 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: '\f002'; }замените на
.flex-direction-nav a:before { font-family: "FontAwesome"; font-size: 40px; display: inline-block; content: '\f053'; 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'; }
#7
Отправлено 11 Февраль 2016 - 15:11
#8
Отправлено 11 Февраль 2016 - 16:29
#9
Отправлено 11 Февраль 2016 - 16:44
kdi45 (11 Февраль 2016 - 15:11) писал:
Здравствуйте. В шаблоне html замените строки:
<script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script>на:
<script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script>
Теперь слайды будут перелистываться плавно.
#10
Отправлено 11 Февраль 2016 - 17:40
#11
Отправлено 11 Февраль 2016 - 21:58
1. После всех манипуляций вверху между слайдером и шапкой осталась узкая белая полоса, которая была не заметна на безфоновом изображении
2. чтоб слайдер не выглядел таким обрезанным, как его можно либо сделать на ширину экрана, либо залить по бокам и под ним (там, где точки) фон, как под шапкой -f2f2f2.
3. как уменьшить расстояние, или вообще этот промежуток убрать, а точки поместить на сам слайдер
#12
Отправлено 12 Февраль 2016 - 05:53
.flexslider { margin: 0 0 60px; background: #ffffff; border: 4px solid #ffffff; position: relative; zoom: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); }
замените на:
.flexslider { margin: 0; background: #ffffff; position: relative; zoom: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); }
2. В шаблоне HTML найдите:
<!-- Слайдер на главной --> {% IF index_page %} <div class="container"> <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="{ASSETS_IMAGES_PATH}slide1.png" /> </li> <li> <img src="{ASSETS_IMAGES_PATH}slide2.png" /> </li> </ul> </div> </div> </div> </div> {% ENDIF %} <!-- /END Слайдер на главной -->замените на:
<!-- Слайдер на главной --> {% IF index_page %} <div id="slideshow" class="wrap"> <div id="slider"> <!-- Slides Container --> <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="{ASSETS_IMAGES_PATH}slide1.png" /> </li> <li> <img src="{ASSETS_IMAGES_PATH}slide2.png" /> </li> </ul> </div> </div> </div> {% ENDIF %} <!-- /END Слайдер на главной -->
3. В flexslider.css найдите:
.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; }
замените на:
.flex-control-nav { width: 100%; position: absolute; bottom: 20px; text-align: center; }
#13
Отправлено 12 Февраль 2016 - 12:40
#15
Отправлено 12 Февраль 2016 - 16:16
kdi45 (12 Февраль 2016 - 15:57) писал:
Здравствуйте. Попробуйте в шаблоне main.css заменить строку:
body {background-color: #ffffff;color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;}на:
body { background-color: #ffffff; color: #666666; font-family: Arial; font-size: 12px; line-height: 1; outline: none; position: relative; overflow: hidden; }
#16
Отправлено 12 Февраль 2016 - 18:10
подозреваю, что нужно применить где то в коде слайдера. ...наверно
#17
Отправлено 12 Февраль 2016 - 18:22
kdi45 (12 Февраль 2016 - 18:10) писал:
подозреваю, что нужно применить где то в коде слайдера. ...наверно
Да, вы правы. Отмените предыдущие изменения из поста #15, и добавьте в конец шаблона main.css строку
.flexslider { overflow: hidden; }
#18
Отправлено 12 Февраль 2016 - 18:32
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных