Hallo ihr,
ich habe in meine Website mit Hilfe einer Codevorlage einen Slider eingefügt. Der Slider hat als Griffe im unteren Bereich die Zahlen "01" und "02"
ich möchte aber, dass es stattdessen ein Pfeil nach links bzw. ein Pfeil nach rechts ist.
Der JS Code sieht so aus:
Code
jQuery(document).ready(function($){
var sliderContainers = $('.cd-slider-wrapper');
if( sliderContainers.length > 0 ) initBlockSlider(sliderContainers);
function initBlockSlider(sliderContainers) {
sliderContainers.each(function(){
var sliderContainer = $(this),
slides = sliderContainer.children('.cd-slider').children('li'),
sliderPagination = createSliderPagination(sliderContainer);
sliderPagination.on('click', function(event){
event.preventDefault();
var selected = $(this),
index = selected.index();
updateSlider(index, sliderPagination, slides);
});
sliderContainer.on('swipeleft', function(){
var bool = enableSwipe(sliderContainer),
visibleSlide = sliderContainer.find('.is-visible').last(),
visibleSlideIndex = visibleSlide.index();
if(!visibleSlide.is(':last-child') && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}
});
sliderContainer.on('swiperight', function(){
var bool = enableSwipe(sliderContainer),
visibleSlide = sliderContainer.find('.is-visible').last(),
visibleSlideIndex = visibleSlide.index();
if(!visibleSlide.is(':first-child') && bool) {updateSlider(visibleSlideIndex - 1, sliderPagination, slides);}
});
});
}
function createSliderPagination(container){
var wrapper = $('<ol class="cd-slider-navigation"></ol>');
container.children('.cd-slider').find('li').each(function(index){
var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
dot = $('<a href="#0"></a>').appendTo(dotWrapper);
dotWrapper.appendTo(wrapper);
var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
dot.text(dotText);
});
wrapper.appendTo(container);
return wrapper.children('li');
}
function updateSlider(n, navigation, slides) {
navigation.removeClass('selected').eq(n).addClass('selected');
slides.eq(n).addClass('is-visible').removeClass('covered').prevAll('li').addClass('is-visible covered').end().nextAll('li').removeClass('is-visible covered');
//fixes a bug on Firefox with ul.cd-slider-navigation z-index
navigation.parent('ul').addClass('slider-animating').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$(this).removeClass('slider-animating');
});
}
function enableSwipe(container) {
return ( container.parents('.touch').length > 0 );
}
});
Alles anzeigen
Im HTML Code ist nur der Teil zu sehen:
HTML
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="is-visible">
<div class="cd-half-block image"></div>
<div class="cd-half-block content">
<div>
<h2>Vincent Späts</h2><br>
<p>Alter: 28</p>
<p>
Beruf: Reisebüroangestellter
</p><br>
<p>Vincent Späts ist ein leidenschaftlicher Leser und hat sich hoffnungslos in die Roman-Heldin "Emma Cooper" verliebt. Um dem Alltagstrott zwischen rassistischen Kunden im Reisebüro und unangenehmen Partygesprächen zu entkommen, engagiert er bei einer dubiosen Agentur ein Double der fiktiven Detektivin... </p>
</div>
</div>
</li> <!-- .cd-half-block.content -->
<li>
<div class="cd-half-block image"></div>
<div class="cd-half-block content light-bg">
<div>
<h2>Robin Czerny</h2><br>
<a href="http://www.robinczerny.de/">www.robinczerny.de</a><br><br>
<p>
Jahrgang 1983
</p>
<p>SoKo Stuttgart (2015)</p>
<p>Detox (2014)</p>
</div>
</div> <!-- .cd-half-block.content -->
</li>
</ul> <!-- .cd-slider -->
</div> <!-- .cd-slider-wrapper -->
Alles anzeigen
Ich wäre so dankbar wenn mir jemand helfen könnte, da ich mich mit Javascript leider kaum auskenne...
Ich habe versucht die Zahlen im JS Code durch HTML Kürzel zu ersetzen, aber das hat leider nicht funktioniert...
Danke schonmal !
Liebe Grüße
Sundream