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

Started by KoVaLsKy, июн 29 2011 05:43

Вы не можете ответить в тему

No replies to this topic

#1 KoVaLsKy

Продвинутый пользователь

Модераторы
906 Сообщений:

ГородИваново

Отправлено 29 июня 2011 - 05:43

Итак, немного покапался, и вот что нашел:
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}

вместо него вставляем

<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}

, где

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;
	}

почему 33 %

все просто, делите 100 на кол-во товаров на одной строке, т.е на значение

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}

параметр

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}

4) Забыл показать, на мой взгляд, самое интерестное:
3 товара на полосе слайдера и меняются они сами.
итак, лезем все туда же, ищем все то же и меняем на

{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}

и вуаля. красота да и только. пользователь видит... и есть 2 секунды подумать)))
P.S больше всего нравится вот такой вариант времени