Перейти к содержанию
Форум поддержки пользователей VamShop

1.Настройка слайдера bxslider


KoVaLsKy

Рекомендуемые сообщения

Итак, немного покапался, и вот что нашел:

1)

как заставить слайдер самому перетекать.

Открываем файл templates\vamshop\module\featured_products_default.html

В самом верху ищем

<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
pager: false
});
});
</script>
{/literal}[/code] вместо него вставляем
[code]<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
ticker:true,
tickerSpeed: 1000
});
});
</script>
{/literal}
обращу Ваше внимание, что скорость зависит от
tickerSpeed: 
, причем чеб больше это число, тем медленее оно "плывет" 2) На одной строке несколько товаров идем все туда же, ище все то же и меняем все тот же код на
<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
displaySlideQty: 3,
moveSlideQty: 1
});
});
</script>
{/literal}[/code] , где
[code]displaySlideQty
-кол-во фотографий на одной строке,
moveSlideQty
- то кол-во товара, которое появится при нажатии на стрелочке. Т.Е в данном примере у нас 3 товара и при нажатии 1 товар уезжает и один приезжает. единственный минус, теперь Вам нужно поиграть с CSS и изменить самые нижние строки на
#slide-featured 
{
width:90%;
margin:0 auto;
}

#slide-featured li
{
list-style: none;
width:33%;
}

#slide-new
{
width:90%;
margin:0 auto;
} [/code] почему 33 % ??? все просто, делите 100 на кол-во товаров на одной строке, т.е на значение
[code]displaySlideQty:
это нужно, что бы товары отобразились ровно. так же многое зависит от того, как отображается Ваш товар на главной. т.е цена, описание, текст строки "доставка" и т.д, ну все сами увидите, как только попробуете. 3) Делаем, что бы товары не "текли" а быстро менялись Все то жеи там же ищем и меняем на
<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
auto: true,
autoControls: true,
autoHover: true,
pager: false,
pause: 2000,
controls: false
});
});
</script>
{/literal}[/code] параметр
[code]pause
задается в миллисекундах,это пауза между сменами. так же если вы хотите изменить вмеря самого "перетекания", то вствьте рядом
speed: 500,
. а теперь попробуйте поставить speed: 5, ))) эффект перетекания незаметен... может понадобится кому. 3) что бы не задавать бусконечного цыкла показа товаров и сделать показ статичным, проще говоря, что бы было начало и конец слайдера вставляем такой вариант
<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
{/literal}[/code] 4) Забыл показать, на мой взгляд, самое интерестное: 3 товара на полосе слайдера и меняются они сами. итак, лезем все туда же, ищем все то же и меняем на
[code]{config_load file="$language/lang_$language.conf" section="featured"}

<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>

{literal}
<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
displaySlideQty: 3,
moveSlideQty: 1 ,
auto: true,
autoControls: true,
autoHover: true,
pager: false,
pause: 2000,
controls: false

});
});
</script>

{/literal}
и как видно было из того, что писал выше
displaySlideQty
кол-во товаров на полосе,
moveSlideQty
параметр, указывающий на число изменяющихся товаров, т.е один уезжает и один появляется. как всегда не забываем изменить параметры CSS. и радуемся красивому слайдеру. 5) И на самое сладкое, мне очень нравится, карсивый эфект: з товара перетекают, и когда встают по центру останавливаются. делается все просто. лезем все туда же, меняем на
{config_load file="$language/lang_$language.conf" section="featured"} 

<link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css" />
<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider-featured').bxSlider({
displaySlideQty: 2,
moveSlideQty: 1 ,
auto: true,
autoControls: true,
autoHover: true,
pager: false,
speed: 3000,
pause: 2000,
controls: false
});
});
</script>
{/literal}[/code] и вуаля. красота да и только. пользователь видит... и есть 2 секунды подумать))) P.S больше всего нравится вот такой вариант времени
[code]speed: 1000,
pause: 3000,

вот как то так

Изменено пользователем KoVaLsKy
Ссылка на сообщение
Поделиться на другие сайты
×
×
  • Создать...