KoVaLsKy 59 Опубликовано 29 июня, 2011 Жалоба Share Опубликовано 29 июня, 2011 (изменено) Итак, немного покапался, и вот что нашел: 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, вот как то так Изменено 30 июня, 2011 пользователем KoVaLsKy Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения