Здравствуйте.Подскажите,пожалуйста, какой параметр меняет плавность прокрутки слайдера и каруселей в шаблоне?
1
Слайдер И Карусели
Автор valeriruss, 07 февр. 2019 01:46
Сообщений в теме: 5
#1
Отправлено 07 Февраль 2019 - 01:46
#2
Отправлено 09 Февраль 2019 - 07:03
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - jquery.slitslider.js - найдите:
измените в нем значение скорости анимации при переключении, 2000 = 2 секунды.
Зайдите в раздел Сайт - Редактор шаблонов - jquery.slitslider.js - найдите:
// transitions speed speed : 2000,
измените в нем значение скорости анимации при переключении, 2000 = 2 секунды.
#4
Отправлено 21 Октябрь 2019 - 08:27
Доброго времени суток!
Суть вопроса такова: 1)Как изменить размер слайдера?
2) Как изменить надпись "Каталог"
3) Как убрать некоторые иконки платежных систем в самом низу сайта
Заранее благодарен!
Суть вопроса такова: 1)Как изменить размер слайдера?
2) Как изменить надпись "Каталог"
3) Как убрать некоторые иконки платежных систем в самом низу сайта
Заранее благодарен!
#5
Отправлено 19 Ноябрь 2019 - 08:11
Здравствуйте.
1. Если вы хотите, чтобы слайдер был на всю ширину сайта, то зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
далее чуть выше найдите:
после него вставьте:
2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
измените цветовое значение стиля background если хотите изменить фон, измените цветовое значение стиля color если хотите изменить цвет шрифта, font-size отвечает за размер шрифта.
3. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
удалите ненужные строки, например, за иконку RBK отвечает следующая строка:
В левой колонке вы можете открыть и просмотреть указанные в коде иконки(oplata_1.png, oplata_2.png, ...).
1. Если вы хотите, чтобы слайдер был на всю ширину сайта, то зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<div class="container 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>в Sushi-Shio!</p> <cite><a href="/catalog">Перейти в меню</a></cite> </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> <cite><a href="/catalog">Перейти в меню</a></cite> </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> <cite><a href="/catalog">Перейти в меню</a></cite> </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>
далее чуть выше найдите:
<div class="clear"></div> </div> </div> </div> {%ENDIF%} <div class="mainContent {%IF index_page%}index_margin{%ENDIF%}"> <div class="mainwidth">
после него вставьте:
{% IF index_page %} <div class="container 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>в Sushi-Shio!</p> <cite><a href="/catalog">Перейти в меню</a></cite> </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> <cite><a href="/catalog">Перейти в меню</a></cite> </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> <cite><a href="/catalog">Перейти в меню</a></cite> </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(); }); </script> {% ENDIF %}
2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.catalogheader a{color:white;font-size:24px;padding:0 20px;line-height:60px;} .catalogheader{text-transform:uppercase;font-size:23px;font-weight:normal;background:#99c800;}
измените цветовое значение стиля background если хотите изменить фон, измените цветовое значение стиля color если хотите изменить цвет шрифта, font-size отвечает за размер шрифта.
3. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<div class="footer_payment"> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_1.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_2.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_3.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_4.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_5.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_6.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_7.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_8.png"/></div> <div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_9.png"/></div> </div>
удалите ненужные строки, например, за иконку RBK отвечает следующая строка:
<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_7.png"/></div>
В левой колонке вы можете открыть и просмотреть указанные в коде иконки(oplata_1.png, oplata_2.png, ...).
#6
Отправлено 12 Май 2020 - 02:31
Добрый день! Как поменять на слайдерах " ВКУСНЫЕ ЗАВТРАКИ В VEGAN!", "СВЕЖИЕ И ОРИГИНАЛЬНЫЕ ДЕСЕРТЫ!", "VEGAN-НАУКА ПРАВИЛЬНОГО ПИТАНИЯ!" - цвет текста? Помогите, пожалуйста!
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных