Ankündigung

Einklappen
Keine Ankündigung bisher.

THEME - Einbau eines CSS-Slider

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Version 5.0.2] THEME - Einbau eines CSS-Slider

    Hallo zusammen...

    nun habe ich auch mal etwas..

    Ich versuche gerade in eine neue Seite einen Slider zu integrieren. Damit nicht zu viel JS drin ist, habe ich mich für einen einfachen css-Slider entschieden. Hier mal der Slider: --> https://codepen.io/Eliteware/full/BoBgqV/
    Download des gesamten Pakets: --> https://github.com/Elitewares/CSS3-Slider


    Ich habe, wie angegeben, den Link im Headbereich eingebunden (Pfad zur CSS-Datei ist richtig) und anschließend den Slider-Code in die home.html eingebunden (steht auf der verlinkten Seite...).

    Bilder habe ich hochgeladen, Pfade angepasst, Texte angepasst und siehe da... ---> NICHTS !!!
    Der Bereich des Sliders wird vom CMS gänzlich ausgeblendet. Warum auch immer. Auch mit dem Firefox Entwicklertool ist der Code nicht zu sehen. Es wird mir gleich der Willkommenstext (per content_text) unter dem Headerbereich angezeigt. Auch mit Nutzung der Inhaltscontainer und setzen der BLOCKS funktioniert es nicht.

    Hat wer eine Idee, warum ich keinen CSS-Slider in die Webseite / home.html einbinden kann?

    Die Demo im Downloadpaket funktioniert auch einwandfrei.

    ***

    Anbei mal der Code, wie er bei mir eingebunden ist:

    --> index.html:
    HTML-Code:
    <head>
     <link rel="stylesheet" href="themes/kundenname/css/slider-def.css">
    </head>
    
    <snip>
    <!-- START -> CONTENT-FILE -->
     {CONTENT_FILE}
    <!-- ENDE -> CONTENT-FILE -->
    </snip>
    --> home.html:
    HTML-Code:
      <!-- BEGIN SLIDER -->
      <div id="slider">
       <div class="slides">
        <!-- First slide -->
        <div class="slider">
         <div class="legend"></div>
          <div class="content">
           <div class="content-txt">
            <h2>Willkommen beim</h2>
            <h3>KUNDENNAME</h3>
           </div>
          </div>
         <div class="images">
        <img src="/images/content/_slider/slider1.jpg">
         </div>
        </div>
    
       <!-- Second slide -->
       <div class="slider">
        <div class="legend"></div>
         <div class="content">
          <div class="content-txt">
            <h2>Willkommen beim</h2>
            <h3>KUNDENNAME</h3>
          </div>
         </div>
        <div class="images">
        <img src="/images/content/_slider/slider2.jpg">
        </div>
       </div>
    
       <!-- Third slide -->
       <div class="slider">
        <div class="legend"></div>
         <div class="content">
          <div class="content-txt">
            <h2>Willkommen beim</h2>
            <h3>KUNDENNAME</h3>
          </div>
         </div>
        <div class="images">
        <img src="/images/content/_slider/slider3.jpg">
        </div>
       </div>
    
       <!-- Fourth slide -->
       <div class="slider">
        <div class="legend"></div>
         <div class="content">
          <div class="content-txt">
            <h2>Willkommen beim</h2>
            <h3>KUNDENNAME</h3>
          </div>
         </div>
        <div class="images">
        <img src="/images/content/_slider/slider4.jpg">
        </div>
       </div>
       </div>
      </div>
      <!-- END SLIDER -->
    
    <section class="main">
     <div class="container">
      <div class="row">
      {CONTENT_TEXT}
      </div>
     </div>
    </section>
    --> original CSS-Datei (slider-btt.css für "Bottom to Top"):
    Code:
    /* Reset */
    *{margin:0;padding:0;}
    
    /* Slider */
    #slider{
      width:100%;
      height:500px;
      position:relative;
      overflow:hidden;
    }
    .slides{
      width:100%;
      height:400%;
      position:relative;
      -webkit-animation:slide 30s infinite;
      -moz-animation:slide 30s infinite;
      animation:slide 30s infinite;
    }
    .slider{
      width:100%;
      height:25%;
      position:relative;
      z-index:1;
      overflow:hidden;
    }
    .slide img{
      width:100%;
      height:100%;
    }
    .slide img{
      width:100%;
      height:100%;
    }
    .image{
      width:100%;
      height:100%;
    }
    .image img{
      width:100%;
      height:100%;
    }
    
    /* Legend */
    .legend{
      border:500px solid transparent;
      border-left:800px solid rgba(52, 73, 94, .7);
      border-bottom:0;
      position:absolute;
      bottom:0;
    }
    
    /* Contents */
    .content{
      width:100%;
      height:100%;
      position:absolute;
      overflow:hidden;
    }
    .content-txt{
      width:400px;
      height:150px;
      float:left;
      position:relative;
      top:300px;
      -webkit-animation:content-s 7.5s infinite;
      -moz-animation:content-s 7.5s infinite;
      animation:content-s 7.5s infinite;
    }
    .content-txt h1{
      font-family:Intro;
      font-size:24px;
      color:#fff;
      text-align:left;
      margin-left:30px;
      padding-bottom:10px;
    }
    .content-txt h2{
      font-family:Quicksand;
      font-weight:normal;
      font-size:14px;
      font-style:italic;
      color:#fff;
      text-align:left;
      margin-left:30px;
    }
    
    /* Switch */
    .switch{
      width:120px;
      height:10px;
      position:absolute;
      bottom:50px;
      z-index:99;
      left:30px;
    }
    .switch > ul{
      list-style:none;
    }
    .switch > ul > li{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#333;
      float:left;
      margin-right:5px;
      cursor:pointer;
    }
    .switch ul{
      overflow:hidden;
    }
    .on{
      width:100%;
      height:100%;
      border-radius:50%;
      background:#f39c12;
      position:relative;
      -webkit-animation:on 30s infinite;
      -moz-animation:on 30s infinite;
      animation:on 30s infinite;
    }
    
    /* Animation */
    @-webkit-keyframes slide{
      0%,100%{
        margin-top:0%;
      }
      21%{
        margin-top:0%;
      }
      25%{
        margin-top:-500px;
      }
      46%{
        margin-top:-500px;
      }
      50%{
        margin-top:-1000px;
      }
      71%{
        margin-top:-1000px;
      }
      75%{
        margin-top:-1500px;
      }
      96%{
        margin-top:-1500px;
      }
    }
    @-moz-keyframes slide{
      0%,100%{
        margin-top:0%;
      }
      21%{
        margin-top:0%;
      }
      25%{
        margin-top:-500px;
      }
      46%{
        margin-top:-500px;
      }
      50%{
        margin-top:-1000px;
      }
      71%{
        margin-top:-1000px;
      }
      75%{
        margin-top:-1500px;
      }
      96%{
        margin-top:-1500px;
      }
    }
    @keyframes slide{
      0%,100%{
        margin-top:0%;
      }
      21%{
        margin-top:0%;
      }
      25%{
        margin-top:-500px;
      }
      46%{
        margin-top:-500px;
      }
      50%{
        margin-top:-1000px;
      }
      71%{
        margin-top:-1000px;
      }
      75%{
        margin-top:-1500px;
      }
      96%{
        margin-top:-1500px;
      }
    }
    
    @-webkit-keyframes content-s{
      0%{left:-420px;}
      10%{left:0px;}
      30%{left:0px;}
      40%{left:0px;}
      50%{left:0px;}
      60%{left:0px;}
      70%{left:0;}
      80%{left:-420px;}
      90%{left:-420px;}
      100%{left:-420px;}
    }
    @-moz-keyframes content-s{
      0%{left:-420px;}
      10%{left:0px;}
      30%{left:0px;}
      40%{left:0px;}
      50%{left:0px;}
      60%{left:0px;}
      70%{left:0;}
      80%{left:-420px;}
      90%{left:-420px;}
      100%{left:-420px;}
    }
    @keyframes content-s{
      0%{left:-420px;}
      10%{left:20px;}
      15%{left:0px;}
      30%{left:0px;}
      40%{left:0px;}
      50%{left:0px;}
      60%{left:0px;}
      70%{left:0;}
      80%{left:-420px;}
      90%{left:-420px;}
      100%{left:-420px;}
    }
    
    @-webkit-keyframes on{
      0%,100%{
        margin-left:0%;
      }
      21%{
        margin-left:0%;
      }
      25%{
        margin-left:15px;
      }
      46%{
        margin-left:15px;
      }
      50%{
        margin-left:30px;
      }
      71%{
        margin-left:30px;
      }
      75%{
        margin-left:45px;
      }
      96%{
        margin-left:45px;
      }
    }
    
    @-moz-keyframes on{
      0%,100%{
        margin-left:0%;
      }
      21%{
        margin-left:0%;
      }
      25%{
        margin-left:15px;
      }
      46%{
        margin-left:15px;
      }
      50%{
        margin-left:30px;
      }
      71%{
        margin-left:30px;
      }
      75%{
        margin-left:45px;
      }
      96%{
        margin-left:45px;
      }
    }
    
    @keyframes on{
      0%,100%{
        margin-left:0%;
      }
      21%{
        margin-left:0%;
      }
      25%{
        margin-left:15px;
      }
      46%{
        margin-left:15px;
      }
      50%{
        margin-left:30px;
      }
      71%{
        margin-left:30px;
      }
      75%{
        margin-left:45px;
      }
      96%{
        margin-left:45px;
      }
    }

    Vielleicht sieht ja einer etwas was ich übersehe...
    Viele Grüße Markus
    ... der Römer aus dem ältesten Dorf "Krefeld´s" :-)


    Kenne contrexx V.1, V.2, V.3, V.4... | ... und ab sofort auch V.5 :-)

    Offizieller "cloudrexx Partner" :-)

  • #2
    Guten Morgen,

    der Slider läuft... Zumindest wird er mir angezeigt...

    Allerdings sind alle Bilder untereinander und dann läuft er nach oben raus. Wie man im Code sehen kann, ist im originalen Code des Sliders bereits der vom Cloudrexx-Support vorgeschlagene Eintrag in die CSS gemacht: --> overflow:hidden;

    Hat wer eine idee, woran das noch liegen kann?
    Viele Grüße Markus
    ... der Römer aus dem ältesten Dorf "Krefeld´s" :-)


    Kenne contrexx V.1, V.2, V.3, V.4... | ... und ab sofort auch V.5 :-)

    Offizieller "cloudrexx Partner" :-)

    Kommentar

    Lädt...
    X