• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Owl Carousel Animation [Anfänger sucht Unterstützung]

Status
Für weitere Antworten geschlossen.
SimonF22

SimonF22

Neues Mitglied
Schönen guten Nachmittag,

Ich bin html Anfänger, will eigentlich nur für meine Freunde und mich eine Website erstellen, weshalb ich auch ein voreingestelltes Template genommen habe. Ansich habe ich es geschafft das Template vollkommen zu bearbeiten etc. Jedoch gibt es jetzt den Abschnitt Team (siehe Anhang)

Das ganze ist mit Owl Carousel gemacht, wenn man auf die Punkte unten klickt kommt man wieder weiter. Jetzt hätten wir das ganze gerne als Animation, laut internet sollte das ganze auch recht leicht funktionieren, leider sind das alles nur so halbe Informationen, mit denen ich als Anfänger leider nichts anfangen kann.

Bei umfassender Lösung wäre ich auch bereit zu einer Bezahlung für die Leistung.
Mein Code (index.html):

HTML: 
<!-- Team Page
    ==========================================-->
    <div id="tf-team" class="text-center">
        <div class="overlay">
            <div class="container">
                <div class="section-title center">
                    <h2><strong><span class="color">Unser Team</span></strong></h2>
                    <div class="line"></div>
                </div>
               
                <div id="team" class="owl-carousel" data-items="1" data-sm-items="1" data-loop="false" data-nav="true" data-autoplay="true" data-dots="false">
                   
                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgtobias.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Tobias Weninger</h3>
                                <p>Komitee / Öffentlichkeitsarbeit</p>
                                <p>Arschloch... bestes Loch.</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imglaurenz.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Laurenz Spatt</h3>
                                <p>Komitee / Projektmanagement</p>
                                <p>Random Zitat.</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgherwig.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Herwig Heiger</h3>
                                <p>Komitee / Whatever</p>
                                <p>....</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgdanial.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Danial Mohammadi</h3>
                                <p>Komitee / .. </p>
                                <p>..</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgmatthias.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Matthias Tieber</h3>
                                <p>Komitee / .. </p>
                                <p>....</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgsimon.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Simon Federmann</h3>
                                <p>Vorstand / </p>
                                <p>...</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

Mein Code (owl.carousel.css):


Code: 
/*
 *     Core Owl Carousel CSS File
 *    v1.3.2
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
   
.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

Mein Code (owl.theme.css):
Code: 
/*
*     Owl Carousel Owl Demo Theme
*    v1.3.2
*/

.owl-theme .owl-controls{
    margin-top: 10px;
    text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
    min-height: 150px;
    background: url(AjaxLoader.gif) no-repeat center center
}
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    103,9 KB · Aufrufe: 2
Zuletzt bearbeitet:
Spicelab schrieb:
https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html - wenn das "nur so halbe Informationen" sein sollen, hast Du Dich wohl woanders im Internet informiert.
Zum Vergrößern anklicken....

Wie gesagt bin leider(?) vollkommener Neuling, versuche auch nur das so zum laufen zu bringen. Kenne die Demonstration auch, sagt mir aber leider weder wie ich das auf den vorliegenden Code anwenden kann, noch wie es einzufügen ist. Vielleicht sehr sehr einfache Dinge für HTML Kenner, für einen Laien leider nicht. :/
 
SimonF22 schrieb:
sagt mir aber leider weder wie ich das auf den vorliegenden Code anwenden kann, noch wie es einzufügen ist.
Zum Vergrößern anklicken....
https://owlcarousel2.github.io/OwlC...additional-animation-from-animate-css-library - 3 Arbeitsschritte, klar benannt und beschrieben.

Wüsste nicht, was daran (selbst für einen Anfänger, der sich aber schon eine gewisse Zeit mit diesem jQuery-Plugin beschäftigt, und somit die Code-Struktur nichts Neues für ihn ist) nicht nachvollziehbar ist.
 
SimonF22 schrieb:
Wie gesagt bin leider(?) vollkommener Neuling, versuche auch nur das so zum laufen zu bringen. Kenne die Demonstration auch, sagt mir aber leider weder wie ich das auf den vorliegenden Code anwenden kann, noch wie es einzufügen ist. Vielleicht sehr sehr einfache Dinge für HTML Kenner, für einen Laien leider nicht. :/
Zum Vergrößern anklicken....

Womöglich lässt sich das ganze auch über data-Attributes konfigurieren; allerdings nur eine Vermutung:
HTML: 
<div id="team" class="owl-carousel" data-items="1" data-sm-items="1" data-loop="false" data-nav="true" data-autoplay="true" data-dots="false" data-animate-out="fadeOut" data-animate-in="fadeOut">
 
Spicelab schrieb:
https://owlcarousel2.github.io/OwlC...additional-animation-from-animate-css-library - 3 Arbeitsschritte, klar benannt und beschrieben.

Wüsste nicht, was daran (selbst für einen Anfänger, der sich aber schon eine gewisse Zeit mit diesem jQuery-Plugin beschäftigt, und somit die Code-Struktur nichts Neues für ihn ist) nicht nachvollziehbar ist.
Zum Vergrößern anklicken....

Schritt 1 und 2 sind auch erledigt,

Schritt3:

Code: 
                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgsimon.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Simon Federmann</h3>
                                <p>Vorstand / </p>
                                <p>...</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            items:5,
            loop:true,
            margin:10,
            autoplay:true,
            autoplayTimeout:1000,
            autoplayHoverPause:true
        });
    </script>


Habe ich so auch versucht einzubinden. Habe mich soweit mit JQuery auseinandergesetzt wie ich bisher konnte. Das Problem ist ja, dass es bei mir so nicht funktioniert wie ich das versuche und ich meinen Fehler einfach nicht sehe, deshalb bin ich hier, da ich diese ganzen Demos gefunden und auch probiert habe es aber nicht hinbekomme.

scbawik schrieb:
Womöglich lässt sich das ganze auch über data-Attributes konfigurieren; allerdings nur eine Vermutung:
HTML: 
<div id="team" class="owl-carousel" data-items="1" data-sm-items="1" data-loop="false" data-nav="true" data-autoplay="true" data-dots="false" data-animate-out="fadeOut" data-animate-in="fadeOut">
Zum Vergrößern anklicken....
Habe ich probiert, hat leider nicht geklappt:/ Kann es sein, dass es irgendwie blockiert wird?
 
Zuletzt bearbeitet von einem Moderator:
Zum Vergleich:
HTML: 
<!-- Zeile #233 vom Animate Demo animate.html --><link rel="stylesheet" href="../assets/css/animate.css">
          <script>
            jQuery(document).ready(function($) {
              $('.fadeOut').owlCarousel({ // 1. Demo "fadeOut"
                items: 1,
                animateOut: 'fadeOut',
                loop: true,
                margin: 10,
              });
              $('.custom1').owlCarousel({ // 2. Demo "slideOutDown and flipInX"
                animateOut: 'slideOutDown',
                animateIn: 'flipInX',
                items: 1,
                margin: 30,
                stagePadding: 30,
                smartSpeed: 450
              });
            });
          </script>
 
Und zwecks der beiden CSS-Klassen (.fadeOut / .custom1) aus dem Beispiel:
HTML: 
<!-- Zeile #85 --><div class="fadeOut owl-carousel owl-theme">

<!-- Zeile #147 --><div class="custom1 owl-carousel owl-theme">
 
Habe es jetzt so
Code: 
<!-- Team Page
    ==========================================-->
    <div id="tf-team" class="text-center">
        <div class="overlay">
            <div class="container">
                <div class="section-title center">
                    <h2><strong><span class="color">Unser Team</span></strong></h2>
                    <div class="line"></div>
                </div>
               
                <div id="team" class="fadeOut owl-carousel owl-theme">
                   
                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgtobias.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Tobias Weninger</h3>
                                <p>Komitee / Öffentlichkeitsarbeit</p>
                                <p>Arschloch... bestes Loch.</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imglaurenz.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Laurenz Spatt</h3>
                                <p>Komitee / Projektmanagement</p>
                                <p>Random Zitat.</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgherwig.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Herwig Heiger</h3>
                                <p>Komitee / Whatever</p>
                                <p>....</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgdanial.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Danial Mohammadi</h3>
                                <p>Komitee / .. </p>
                                <p>..</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgmatthias.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Matthias Tieber</h3>
                                <p>Komitee / .. </p>
                                <p>....</p>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="thumbnail">
                            <img src="img/team/imgsimon.jpg" alt="..." class="img-circle team-img">
                            <div class="caption">
                                <h3>Simon Federmann</h3>
                                <p>Vorstand / </p>
                                <p>...</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
            jQuery(document).ready(function($) {
              $('.fadeOut').owlCarousel({ // 1. Demo "fadeOut"
                items: 1,
                animateOut: 'fadeOut',
                loop: true,
                margin: 10,
              });
            });
    </script>
Bewegt sich zwar keinen Milimeter aber ich werds einfach mal weiter probieren ob ich ne Lösung finde. Danke für die Hilfe!
 
SimonF22 schrieb:
Habe es jetzt so
Code: 
...
    </div>
    <script>
            jQuery(document).ready(function($) {
              $('.fadeOut').owlCarousel({ // 1. Demo "fadeOut"
                items: 1,
                animateOut: 'fadeOut',
                loop: true,
                margin: 10,
              });
            });
    </script>


Bewegt sich zwar keinen Milimeter aber ich werds einfach mal weiter probieren ob ich ne Lösung finde.
Zum Vergrößern anklicken....
Und die zugehörige animate.css-Datei (Zeile #233) ist stattdessen im Header <head></head> eingebunden, und der Pfad bei einer abweichenden Verzeichnisstruktur angepasst?
HTML: 
<link rel="stylesheet" href="../assets/css/animate.css">
Beide Fragen können mit "Ja" beantwortet werden?

Browsercache leeren, Seite neu laden :cool::D
 
Code: 
 <!-- Stylesheet
    ================================================== -->
    <link rel="stylesheet" type="text/css"  href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" href="css/animate.css">

Ist so oben unter <head> </head> eingeordnet, die Datei ist auch unter css/
 
Hab da noch was entdeckt :D

Zeile 89 in der CodeBox: margin: 10, das Überbleibsel vom Original ist böse, weil jetzt letztgenannter Parameter vor });
 
Spicelab schrieb:
Hab da noch was entdeckt :D

Zeile 89 in der CodeBox: margin: 10, das Überbleibsel vom Original ist böse, weil jetzt letztgenannter Parameter vor });
Zum Vergrößern anklicken....
rauslöschen oder irgendwie umschreiben? Beim rauslöschen ändert sich schonmal nichts:p


Sorry für meine anstrengende Unwissenheit, aber solange sich GARNICHTS verändert kann nicht nichteinmal probieren was ich im Code verändern kann:(
 
SimonF22 schrieb:
rauslöschen oder irgendwie umschreiben? Beim rauslöschen ändert sich schonmal nichts:p
Zum Vergrößern anklicken....
Nur das Komma entfernt?
SimonF22 schrieb:
aber solange sich GARNICHTS verändert kann nicht nichteinmal probieren was ich im Code verändern kann:(
Zum Vergrößern anklicken....
Hier gilt grundsätzlich:
Spicelab schrieb:
Browsercache leeren, Seite neu laden :cool::D
Zum Vergrößern anklicken....
um sicherzustellen, dass tatsächlich der aktualisierte Code vom Browser geladen wird.
 
Spicelab schrieb:
Nur das Komma entfernt?
Hier gilt grundsätzlich:
um sicherzustellen, dass tatsächlich der aktualisierte Code vom Browser geladen wird.
Zum Vergrößern anklicken....

Ist schon vorhin passiert, hatte vergessen das dazu zu schreiben. Auch mit Firefox und IE probiert (Arbeite mit Chrome) und bei allen der Chache gelöscht.
 
Tja... jetzt hilft wohl nur noch eins: ist die Seite für uns zugänglich? Dann nenne bitte den Link.
 
SimonF22 schrieb:
Nein derzeit nur Lokal

http://workupload.com/archive/EkST5X4

Das ist der Ordner mit allen Dateien
Zum Vergrößern anklicken....
Und die dürfen wir uns alle einzeln runterladen, geschickterweise mit index.html beginnend, um die Verzeichnisstruktur aller involvierten Dateien aus dem Quellcode in Erfahrung bringen und lokal anlegen/erzeugen zu können, ...??? !!!

Ich lach' später d'rüber, wenn ich Zeit habe.

Muss erstmal in die Küche, was leckeres brutzeln :) Magen knurrt :(
 
Spicelab schrieb:
Und die dürfen wir uns alle einzeln runterladen, geschickterweise mit index.html beginnend, um die Verzeichnisstruktur aller involvierten Dateien aus dem Quellcode in Erfahrung bringen und erzeugen zu können, ...??? !!!

Ich lach' später d'rüber, wenn ich Zeit habe.

Muss erstmal in die Küche, was leckeres brutzeln :) Magen knurrt :(
Zum Vergrößern anklicken....

Tut mir leid, kannte den Filehoster nicht, wusste nicht, dass der die Dateien aus dem Ordner heraus einzeln hochläd :)

Habs als .rar hochgeladen:

http://workupload.com/file/rkJLmYZ
 
Zuletzt bearbeitet:
Kleiner, aber feiner Unterschied mit großen Folgen.

In Deinem HTML stimmt nicht die Reihenfolge, wann jquery.1.11.1.js und das animate-Script geladen werden.

Die Fehlerkonsole Deines Browsers ist da eigentlich sehr auskunftsfreudig:
console schrieb:
ReferenceError: jQuery is not defined
http://localhost/www/test/SimonF22/Homepage/
Line 210
Zum Vergrößern anklicken....
Stattdessen (hierbei auf die HTML- & JS-Kommentare <!-- --> & // achten, die neben Hinweisen auch Codezeilen deaktivieren können):
HTML: 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Pfad ohne https:-Protokoll, um "Gemischte Inhalte" zu verhindern, die vom Browser geblockt werden, falls eigener Server nur über http: läuft -->
    <!--<script type="text/javascript" src="js/jquery.1.11.1.js"></script>--><!-- jQuery-Lib wird nur einmal geladen -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/SmoothScroll.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.js"></script>

    <script src="js/owl.carousel.js"></script>
    <script>
            //jQuery(document).ready(function($) { // obsolet - Script steht am Ende des Dokuments - Dokument ist geladen
              $('.fadeOut').owlCarousel({ // 1. Demo "fadeOut"
                items: 1,
                animateOut: 'fadeOut',
                loop: true,
                margin: 10
              });
            //}); // das Ende von jQuery(document).ready(function($){}
    </script>
"Und warum funktioniert's dann im Originalbeispiel?" wirst Du Dich jetzt fragen.

Weil dort die Bibliothek schon zu Beginn des HTML-Codes im Dokumentheader <head></head> geladen wurde.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben