1) Dodajemy style
<style>
#sc-slider-logo {position:relative; max-height:130px; border-top: 4px solid #fafafa; }
#sc-slider-logo .item {display:inline-block; position:relative; padding:20px 0 0 0;}
#sc-slider-logo .innerbox {overflow:hidden; padding:0;}
#sc-slider-logo {overflow:hidden; padding:0;}
#sc-slider-logo img {opacity:1; max-width:140px; height:auto}
#sc-slider-logo img:hover {opacity:0.6;}
</style>2) Dodajemy moduł o ID: „sc-slider-logo”, natomiast w treści:
<div class="slider-wrap slider_automove">
<div class=" row center item"><a href="/pl/producer/MACTRONIC/145"><img src="/public/assets/loga/1.png" alt="Mactronic" /></a></div>
<div class=" row center item"><a href="/pl/producer/Exalt/74"><img src="/public/assets/loga/2.png" alt="Exalt" /></a></div>
<div class=" row center item"><a href="/pl/producer/Eclipse/39"><img src="/public/assets/loga/3.png" alt="Eclipse" /></a></div>
<div class=" row center item"><a href="/pl/producer/Dye/42"><img src="/public/assets/loga/4.png" alt="Dye" /></a></div>
<div class=" row center item"><a href="/pl/producer/MILSIG/109"><img src="/public/assets/loga/5.png" alt="MILSIG" /></a></div>
<div class=" row center item"><a href="/pl/producer/Victorinox/135"><img src="/public/assets/loga/6.png" alt="Victorinox" /></a></div>
<div class=" row center item"><a href="/pl/producer/GERBER-SURVIVAL/131"><img src="/public/assets/loga/7.png" alt="GERBER SURVIVAL" /></a></div>
<div class=" row center item"><a href="/pl/producer/WALTHER/125"><img src="/public/assets/loga/8.png" alt="WALTHER" /></a></div>
<div class=" row center item"><a href="/pl/producer/Spyder/98"><img src="/public/assets/loga/9.png" alt="Spyder" /></a></div>
<div class=" row center item"><a href="/pl/producer/Empire/48"><img src="/public/assets/loga/10.png" alt="Empire" /></a></div>
<div class=" row center item"><a href="/pl/producer/VALKEN/107"><img src="/public/assets/loga/11.png" alt="VALKEN" /></a></div>
<div class=" row center item"><a href="/pl/producer/VForce/71"><img src="/public/assets/loga/12.png" alt="VForce" /></a></div>
<div class=" row center item"><a href="#"><img src="/public/assets/loga/13.png" alt="The Freak" /></a></div>
<div class=" row center item"><a href="/pl/producer/Proto/47"><img src="/public/assets/loga/14.png" alt="Proto" /></a></div>
<div class=" row center item"><a href="/pl/producer/Virtue-Paintball/93"><img src="/public/assets/loga/15.png" alt="Virtue Paintball" /></a></div>
<div class=" row center item"><a href="/pl/producer/HK-Army/95"><img src="/public/assets/loga/16.png" alt="HK Army" /></a></div>
<div class=" row center item"><a href="/pl/producer/DROM/120"><img src="/public/assets/loga/17.png" alt="DROM" /></a></div>
<div class=" row center item"><a href="/pl/producer/Tippmann/46"><img src="/public/assets/loga/18.png" alt="Tippmann" /></a></div>
<div class=" row center item"><a href="/pl/producer/Ninja/60"><img src="/public/assets/loga/19.png" alt="Ninja" /></a></div>
<div class=" row center item"><a href="/pl/producer/NXe/56"><img src="/public/assets/loga/20.png" alt="NXe" /></a></div>
<div class=" row center item"><a href="/pl/producer/BT/40"><img src="/public/assets/loga/21.png" alt="BT" /></a></div>
<div class=" row center item"><a href="/pl/producer/Safer/49"><img src="/public/assets/loga/22.png" alt="Safer" /></a></div>
<div class=" row center item"><a href="/pl/producer/SLY/51"><img src="/public/assets/loga/23.png" alt="SLY" /></a></div>
<div class=" row center item"><a href="/pl/producer/RPS/68"><img src="/public/assets/loga/24.png" alt="RPS" /></a></div>
</div>Oczywiście linki oraz zdjęcia dopasujcie pod stronę waszego klienta. Każdy DIV odpowiada za jeden link ze zdjęciem producenta.
3) Kod JS
*logotypy slider*/
Shop.include({
selectorFunctions: {
boxsliderlogo: {
selector: '#sc-slider-logo',
load: function(slider, shopInstance) {
var isAnimated;
isAnimated = false;
slider.removeClass('loading');
shopInstance.lazypicture.lazyLoading();
var _initialSlideWidth = 200,
_slideWidth, _sliderWidth, _visibleSlides, _maxHeight = 0,
_autoMove = true,
_autoMoveDuration = 5600;
if (slider.hasClass('slider_automove')) {
_autoMove = true;
}
var slides = slider.find('.item');
if (slides.length > 1) {
var sliderWrap = $('<div class="slider-wrap" />').css('text-align', 'left');
var nav = $('<div />').appendTo(slider);
var prev = $('<span class="slider-nav-left" />').css({
'display': 'none'
}).appendTo(nav);
var next = $('<span class="slider-nav-right" />').css({
'display': 'block'
}).appendTo(nav);
slides.wrapAll(sliderWrap);
sliderWrap = slider.find('.slider-wrap');
shopInstance.addEvent('img:change:slider:' + slider.attr('id'), function() {
sliderWrap.css('height', 'auto');
slides.each(function() {
if ($(this).outerHeight() >= _maxHeight) {
_maxHeight = $(this).outerHeight();
sliderWrap.height(_maxHeight + 6);
}
});
});
$(window).on('resize', function() {
_sliderWidth = slider.outerWidth();
_visibleSlides = Math.floor(_sliderWidth / _initialSlideWidth) || 1;
_slideWidth = _sliderWidth / _visibleSlides;
slides.each(function() {
if ($(this).outerHeight() >= _maxHeight) {
_maxHeight = $(this).outerHeight();
}
});
slides.outerWidth(_slideWidth);
sliderWrap.outerWidth((_slideWidth * slides.length) + 3).height(_maxHeight + 6);
slides.css('left', '0');
if (slides.length > _visibleSlides) {
next.show();
prev.hide();
} else {
next.hide();
prev.hide();
}
}).trigger('resize');
next.on('click', function(ev) {
ev.stopPropagation();
if (!isAnimated) {
slides.animate({
left: "-=" + (_slideWidth)
}, {
duration: 400,
start: function() {
isAnimated = true;
},
complete: function() {
var pos = parseInt($(this).css('left'));
if ((slides.length - _visibleSlides) * Math.floor(_slideWidth) <= -pos) {
next.hide();
}
if (-pos > 0) {
prev.show();
}
isAnimated = false;
}
});
}
});
prev.on('click', function(ev) {
ev.stopPropagation();
if (!isAnimated) {
slides.animate({
left: "+=" + (_slideWidth)
}, {
duration: 400,
start: function() {
isAnimated = true;
},
complete: function() {
var pos = parseInt($(this).css('left'));
if (-pos <= 0) {
prev.hide();
}
if ((slides.length - _visibleSlides) * Math.floor(_slideWidth) >= -pos) {
next.show();
}
isAnimated = false;
}
});
}
});
slider.on('swipeleft', function() {
if (next.is(':visible')) {
next.trigger('click');
}
});
slider.on('swiperight', function() {
if (prev.is(':visible')) {
prev.trigger('click');
}
});
if (_autoMove) {
setInterval(function() {
if (next.is(':visible')) {
next.trigger('click');
} else {
slides.animate({
left: 0
}, 600, function() {
next.show();
prev.hide();
})
}
}, _autoMoveDuration)
}
}
}
},
}
});
// end logotypy sliderSlider z producentami/logotypami – Shoper