Jump to content

Question about Flexslider 2

kuba2

By kuba2,
in Dev Talk

 Share

Recommended Posts

kuba2 Sr. Member

kuba2

Posted
Posted (edited)

Hello

I have a non PW question....

Somehow I am too stupid to get Flexslider 2  SLIDER running....

Does anybody have a suggestion what could be wrong here? I have copied the Flexslider 2 code one to one and it is not responsive....

 

the website:

http://www.airbrush-makeup.ch/test/index.html

 

Thanks for any help

Jakob

  

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airbrush Makeup</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/style.css">


    <link rel="stylesheet" href="flex/flexslider.css" type="text/css" media="screen" />




        

  </head>
  <body>



    <div class="grid-container">
             <div class="grid-x grid-padding-x">
                
                      <div class="large-3 medium-3 cell">
                        <img src="img/logo.png">
                      </div>


                       <div class="large-9 medium-9 cell">

                              <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                                <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                                <div class="title-bar-title">Menu</div>
                              </div>

                              <div class="top-bar" id="example-menu">
                                <div class="top-bar-right">
                                  <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>

                                    <li class="farb"><a href="#">HOME</a></li>
                                    <li><a href="services.html">SERVICES</a></li>
                                    <li><a href="workshops.html">WORKSHOPS</a></li>
                                    <li><a href="portfolio.html">PORTFOLIO</a></li>
                                    <li><a href="ubermich.html">ÜBER MICH</a></li>
                                    <li><a href="kontakt.html">KONTAKT</a></li>
                                    <li class="padright"><a href="#">DINAIR-ONLINESHOP</a></li>
                                </ul>
                              </div>

                            </div>

                              <div class="kontakt_header">
                                <p>TERMIN VEREINBAREN: Tel. 077 400 1 400 / info@airbrush-makeup.ch</p>
                              </div>
                      </div>
              </div>


            <div class="grid-x grid-padding-x">
              <div class="large-12 medium-12 cell" id="balken">
                
              </div>
            </div>




            <div class="grid-x grid-padding-x">
              <div class="large-12 medium-12 cell" id="sliderx">

                <!-- Place somewhere in the <body> of your page -->
                      <div class="flexslider">
                        <ul class="slides">
                          <li>
                            <img src="img/Dinair_Wechsler_Index_3.jpg" />
                          </li>
                          <li>
                            <img src="img/Dinair_Wechsler_Index_3.jpg" />
                          </li>
                          <li>
                            <img src="img/Dinair_Wechsler_Index_3.jpg" />
                          </li>
                        
                        </ul>
                      </div>


              </div>
            </div>



          <div class="grid-x grid-padding-x" id="card-container">


              <div class="large-4 medium-4 cell" id="">

                  <div class="card" id="cardwidth">
                    <!-- <div class="card-divider">
                      This is a header
                    </div> -->
                    <img src="img/1.png">
                    <div class="card-section">
                      <h5>AIRBRUSH-WORKSHOP</h5>
                      <p>Faszination Airbrush-Makeup:
                          Schnuppern Sie mit dem Workshop
                          „Erste Schritte“ erstmals Airbrush-
                          Luft oder lernen Sie Tricks und Kniffe
                          im Anfänger-Workshop.<br/><br/>
                          </p>
                          MEHR ERFAHREN
                    </div>
                  </div>

               </div>
               

              <div class="large-4 medium-4 cell" id="">


                  <div class="card" id="cardwidth">
                    <!-- <div class="card-divider">
                      This is a header
                    </div> -->
                    <img src="img/2.png">
                    <div class="card-section">
                      <h5>MAKEUP-SERVICES</h5>
                      <p>Ein tolles Tages-Makeup oder das
                          perfekte Styling für den besonderen
                          Event - mit Airbrush wird jedes Makeup
                          erstklassig! Vereinbahren Sie
                          Ihren Termin für Ihr persöhnliches
                          Airbrush-Makeup.<br/><br/>
                          </p>
                          MEHR ERFAHREN
                    </div>
                  </div>

               </div>
               

              <div class="large-4 medium-4 cell" id="">

                  <div class="card" id="cardwidth">
                    <!-- <div class="card-divider">
                      This is a header
                    </div> -->
                    <img src="img/3.png">
                    <div class="card-section">
                      <h5>DINAIR ONLINE-SHOP</h5>
                      <p>Entdecke jetzt den perfekten Teint
                          mit den praktischen Airbrush-Sets
                          von DINAIR:<br/><br/>
                          </p>
                          MEHR ERFAHREN
                    </div>
                  </div>

               </div>


          </div>




              <!-- TESTE OB DIV STIMMEN -->
</div> 
          



    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/dist/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
    <script src="js/min/app-min.js"></script>


      <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

  <!-- FlexSlider -->
  <script defer src="flex/jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>


    



  </body>
</html>

 

Edited by kongondo
Moved topic to Dev Talk as it is not about ProcessWire
Link to comment
Share on other sites
abdus Hero Member

abdus

Posted
Posted

All three slides have the same image, unless that's the intended behaviour, or all images are the same, which I doubt, make sure you're using the current iteration element ($img) inside your loop. 

<div class="flexslider">
    <ul class="slides">
        <?php foreach ($page->slideImages as $img): ?>
            <li>
                <img src="<?= $img->width(1200)->url ?>" />
            </li>
        <?php endforeach; ?>
    </ul>
</div>

Another thing is that you're loading 2 different jQuery scripts on the page. The one packaged with Foundation (under bower_components) is sufficient. 

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

In fact, why not use the slider that comes with Foundation instead? You're already loading foundation js files.

http://foundation.zurb.com/sites/docs/orbit.html

  • Like 1
Link to comment
Share on other sites
kuba2 Sr. Member

kuba2

Posted
  • Author
Posted

Thanks

I used flexslider before and it worked fine.

It doesn't work, when I delete the script line with the 1.7 jquery...can I change the path to the foundation jquery?

Thats something I am not getting yet

 

I have to look into the foundation slider

 

Thanks again

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...