Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Pfeile statt Zahlen in einem Slider

  1. #1
    Azubi(ne)
    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard Pfeile statt Zahlen in einem Slider

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

    Im HTML Code ist nur der Teil zu sehen:

    HTML-Code:
    <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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Das ist eine seitenweise Navigation zwischen den Bildern des Sliders. Sie durch Pfeile zu ersetzen macht wenig Sinn. Was ist denn wenn Du mehr als 2 Bilder in der Galerie hast? Dann würde da nur Pfeile zu sehen sein mit denen niemand etwas anfangen kann.

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    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üße

    Sundream

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Bei zwei Bilder und wenn du ansonsten kein jQuery benötigst, kannst du es auch mit CSS3 umsetzen

  5. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Nur das mit den Pfeilen oder den ganzen Slider?

    Kannst du mir vielleicht auch sagen wie?

    Danke schonmal !

  6. #6
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Bei nur 2 Bildern braucht man doch keinen Slider.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  7. #7
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

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

  8. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Guck mal hier:http://www.jssor.com/

  9. #9
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Habe mich mal versuch.
    Code:
    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');
        }
    CSS
    Code:
    @media only screen and (min-width: 900px) {
      .cd-slider-navigation {
        padding: 0.5em 1em;
        background-color: rgba(0, 0, 0, 0.8);
        /* fixes a bug on Firefox with ul.cd-slider-navigation z-index */
        -webkit-transform: translateZ(2px) translateX(-50%);
        -moz-transform: translateZ(2px) translateX(-50%);
        -ms-transform: translateZ(2px) translateX(-50%);
        -o-transform: translateZ(2px) translateX(-50%);
        transform: translateZ(2px) translateX(-50%);
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
      }
      .cd-slider-navigation.slider-animating {
        /* fixes a bug on Firefox with ul.cd-slider-navigation z-index */
        -webkit-transform: translateX(-50%) scale(1);
        -moz-transform: translateX(-50%) scale(1);
        -ms-transform: translateX(-50%) scale(1);
        -o-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
      }
      .cd-slider-navigation a {
        height: 40px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        /* reset style */
        text-indent: 0;
        border: none;
        border-radius: 0;
        color: #ffffff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      .cd-slider-navigation li.selected a {
        background-color: transparent;
        color: #f3b96c;
      }
    /* Hier neu einfügen */
    .cd-slider-navigation li:nth-child(1) a:before {
     content:"<";
     font-weight:bold;
     font-size:4rem;
    }
    .cd-slider-navigation li:nth-child(2) a:before {
     content:">";
     font-weight:bold;
     font-size:4rem;
    }
    }
    slider.jpg
    Geändert von djheke (24.05.2016 um 13:59 Uhr)

  10. Folgende User finden die Antwort von djheke gut:


  11. #10
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Pfeile statt Zahlen in einem Slider

    Oh vielen vielen Dank!!!
    Werde das heute gleich mal ausprobieren
    Echt danke!

Ähnliche Themen

  1. Slider Problem
    Von Sundream im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 29.04.2016, 17:20
  2. Image Slider / Menu Slider / Auswah Menu
    Von Turok im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.04.2016, 22:08
  3. Div Box Slider
    Von robin_moser im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 25.08.2015, 17:37
  4. und noch ne frage..... änderung der pfeile !
    Von driver im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 5
    Letzter Beitrag: 11.04.2006, 22:51
  5. Antworten: 11
    Letzter Beitrag: 29.09.2005, 16:03

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •