Почему не выводятся кнопки слайдера?

Question

[Сергей Коваль]

Слайдер на jQuery.

<nav id="nav-dots" class="nav-dots">
					<span class="nav-dot-current"></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
</nav>

$(function() {
			
		var Page = (function() {

			var $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() {

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

cms - OpenCart. Первый раз работаю с ней. Возникли такие проблемы. Когда слайдер сам, то работает нормально. Ставлю в cms - нет кнопок.
И как сделать чтобы слайды менялись ?

Answer 1

[asdz]

так сложно сказать, смотрите что с итоговой разметкой, может цсс некорректный и кнопки не видны.
этого не хватает

<nav id="nav-arrows" class="nav-arrows">
        <span class="nav-arrow-prev">Previous</span>
        <span class="nav-arrow-next">Next</span>
    </nav>

и смотрите у них какой код инициализации:

$(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);

				*/
			
			});

а вы почему то у себя убрали все что связано с кнопками слайдера

Comments

[Сергей Коваль]

Можете посмотреть ? intercars.se
Буду благодарен.

[asdz]

в разметке не хватает
Previous
Next

tympanus.net/codrops/2012/06/05/fullscreen-slit-sl...

[Сергей Коваль]

@asdz не помогло. Наверное проблема в конфликте css...

[asdz]

еще джаваскрипт поправьте как в ответе

[Сергей Коваль]

@asdz Не помогло.
Это не мешает ?
.nav-arrows,
.nav-dots {
display: none;
}

[asdz]

nav-arrows - это стрелки влево вправо, nav-dots это точки. Вам что нужно?

[Сергей Коваль]

Нужны точки. Но когда я убирал none то кнопки и точки появились, но они не работали.

[asdz]

Вам еще надо подключить скрипт benalman.com/projects/jquery-cond-plugin и в stylenojs.css убрать вконце .nav-dots display: none

[asdz]

также вам нужно убрать второе подключение jquery т.к. предыдущий плпгин из-за этого перестает работать:

[asdz]

<script type="text/javascript" src="catalog/view/theme/intercars/js/jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="catalog/view/theme/intercars/js/jquery.slitslider.js"></script>
<code>

[Сергей Коваль]

@asdz это подключать ? benalman.com/code/javascript/jquery/jquery.ba-cond.js

[asdz]

Это у вас уже подключено, я просто не заметил, оказывается после подключения этого плагина, вы опять jquery подключаете из-за этого он не работает. а в коде слайдера происходит ошибка

[Сергей Коваль]

@asdz но кнопки все равно не работают (

[asdz]

вы все равно повторно подключаете джиквери после подключения плагина, строка 106:

<script type="text/javascript" src="catalog/view/theme/intercars/js/jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<code>
джиквери должен на странице первым подключаться до всех плагинов

[Сергей Коваль]

@asdz вооо...уже хоть кнопки работают, спасибо. Но анимация смены слайдов плохая (

[asdz]

Анимация нормальная, проблема в том что в начале анимации картинка заднего фона куда-то смещается то ли вверх, то ли вниз, это тоже через цсс надо посмотреть и подправить.

[Сергей Коваль]

@asdz Решено. Огромное вам спасибо за потраченное время. Извините за мою неграмотность.