Wieso den falschen Slider?
Weißt du zufällig eine bessere Alternative?
Beiträge von Sundream
-
-
Hallo,
ich hatte hier schonmal geschrieben, weil ich Probleme mit den Slidern auf einer meiner Seiten hatte.
Jetzt gibt es leider ein neues Problem.
Ich habe auf der Seite http://parasozial-film.de/Figuren.html folgendes Problem, der 4. und 5. Slider auf der Seite funktionieren nicht ganz richtig.
Beim 4. Slider verschwindet ab einer gewissen Stelle der text und beim 5. Slider ändert der Text sich ab einer bestimmten stelle nicht. Lösen konnte ich das Problem indem ich die Teile der Slider, die Probleme machen mit einem margin-left von bis zu -2em versehe. dann tritt zwar der erste Fehler nicht mehr auf, aber dafür sind beide Slider natürlich ab einer bestimmten Bildschirmgröße kleiner..was irgendwie doof aussieht.
Ich verstehe aber allgemein nicht, warum nur diese beiden Slider probleme machen, ich habe auch den Code von den anderen schon verwendet und nur angepasst, aber das Problem bleibt...ich hoffe jemand kann helfen...danke schonmal
Liebe Grüße
Sundream
-
Hat jemand irgendeine Idee?
-
-
Hey,
das komplette Javascript von meiner Seite (parasozial-film.de) funktioniert im IE nicht... woran könnte das liegen?
Mein Java Script:
Code
Alles anzeigenjQuery(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; var dotText = ( index+1 < 10 ) ? (' ') : index+1; // geändert 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 ); } }); jQuery(document).ready(function($){ var sliderContainers = $('.cd-slider-wrapper2'); 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; var dotText = ( index+1 < 10 ) ? (' ') : index+1; // geändert 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 ); } }); jQuery(document).ready(function($){ var sliderContainers = $('.cd-slider-wrapper3'); 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; var dotText = ( index+1 < 10 ) ? (' ') : index+1; // geändert 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 ); } }); jQuery(document).ready(function($){ var sliderContainers = $('.cd-slider-wrapper4'); 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; var dotText = ( index+1 < 10 ) ? (' ') : index+1; // geändert 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 ); } }); jQuery(document).ready(function($){ var sliderContainers = $('.cd-slider-wrapper5'); 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; var dotText = ( index+1 < 10 ) ? (' ') : index+1; // geändert 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 ); } }); jQuery(document).ready(function($){ var sliderContainers = $('.cd-slider-wrapper6'); 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; var dotText = ( index+1 < 10 ) ? (' ') : index+1; // geändert 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 ); } }); var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } }
Vielen Dank schonmal!
Liebe Grüße
Sundream
-
Also irgendwas hab ich falsch gemacht, keine Ahnung, jetzt gehts aufjedenfall hab das was du geschrieben hast nochmal eingesetzt und jetzt passts, vielen Dank !
-
-
Oh vielen vielen Dank!!!
Werde das heute gleich mal ausprobieren
Echt danke! -
Doch brauche ich schon, weil der Text sich immer rüber "slided" und dabei das Bild wechselt.
Ich habe aber eigentlich auch nach einer Lösung gefragt wie man die Zahlen zu Pfeilen macht und nicht ob ich einen Slider brauche oder nicht....... -
Nur das mit den Pfeilen oder den ganzen Slider?
Kannst du mir vielleicht auch sagen wie?
Danke schonmal !
-
Hallo,
ich finde die Seite sieht garnicht so schlecht aus.
Die Überschriften haben meiner Meinung nach ein bisschen zu wenig Platz und sind auch ein bisschen zu groß
Außerdem ist die Seite nicht responsiv... daran müsstest du definitiv noch arbeiten, also dass sie auch auf tablets und Handys funktioniert, das ist für Websites mittlerweile sozusagen Pflicht
Ansonsten finde ich sie nicht schlechtLiebe Grüße
Sundream
-
Danke, das mit dem body-Elemetn hat funktioniert !:)
-
Hallo threadi,
der Slider wird definitiv immer nur 2 Bilder enthalten, weswegen ich das umbauen möchte. Hättest du dann dafür eine Lösung?
Danke schonmal,
Liebe grüßeSundream
-
Hallo ihr,
ich habe auf meiner Website einen nach oben Button mit folgendem Code eingebaut:
an der Stelle an der der Seitenanfang sein soll
und :
HTML<div class="Seitenanfang"> <p><a href="#Seitenanfang"><img src="Bilder/nach_oben.png"/></a></p> </div>
an der Stelle an der der Button sein soll.
Leider funktioniert der Button in Firefox, aber in Chrome nicht. Hat jemand eine Idee woran das liegen könnte?Liebe Grüße und Danke schonmal !
Sundream
-
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
Alles anzeigenjQuery(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 ); } });
Im HTML Code ist nur der Teil zu sehen:
HTML
Alles anzeigen<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 -->
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
-
Hallo,
ich habe natürlich versucht zuerst die Leute von da per Mail und auch im Forum zu kontaktieren und aber keine Antwort erhalten weswegen ich gehofft hatte hier Hilfe zu finden. Ich habe es jetzt nach tagelangem ausprobieren selbst irgendwie gelöst.
Liebe Grüße
Sundream
-
Hallo,
ich weiß, dass ein 404 kommt, aber ich weiß nicht warum, deswegen habe ich nachgefragt...
und das mit der ol-Liste ist eigentlich mein Problem bei dem ich eine Lösung brauche, weil diese nicht fest im HTML Code steht, sondern durch jQuery erstellt wird... Ich wüsste deswegen gerne, wie ich daran etwas ändern kann...
Den Code findet man auch über CodyHouse, falls das irgendwie weiter hilft...Liebe Grüße
Sundream
-
Hallo,
ich habe ein Problem mit dem Slider von CodyHouse...ich habs hier mal hochgeladen: http://stefaniewolf.bplaced.net/1453448596/poi…ider/index.html
und zwar weiß ich nicht, wie ich den unteren slider dazu bekomme zu funktionieren und warum das Bild beim oberen ganz verschwunden ist...
ich wäre so so dankbar, wenn mir jemand helfen könnte !!
Liebe Grüße
Sundream
-
Hallo,
ich habe es noch nicht gelöst... Am PC sieht es bei mir auch korrekt aus, also auch wenn ich das Fenster kleiner ziehe, am Handy dagegen geht es über den Standardbildschirm hinaus, aber da auch nur in Firefox...
So ganz verstehe ich das nicht...Danke schonmal !
-
Hallo ihr,
ich habe das Problem, dass bei einer Seite die ich erstellt habe der Befehl overflow-x: hidden im Mozilla Browser fürs Handy nicht funktioniert und man trotzdem die seite nach links verschieben kann, obwohl ich das in die css bei body hingeschrieben habe..
Verstehe irgendwie nicht ganz warum...
Habe auch schon versucht den Befehl zusätzlich in den header zu bauen, da ist er aber ab einer bestimmten Bildschirmgröße im Webinsprektor von Mozilla durchgestrichen und ich weiß nicht warum..
Hier der Link zu der Seite : http://www.zimmerei-kohlhepp.deVielen Dank schonmal !
Liebe Grüße
Sundream