nicht angemeldet
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:
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 kann ich mit den Informationen nichts anfangen, verstehe die Demos auf der offiziellen Seite leider nicht genug um es selber hin zu bekommen.
Ich hätte es gerne, dass die Fotos + Beschreibung ohne Unterbrechung durchlaufen, also nach links verschwinden und rechts wieder auftauchen.
Hoffe ihr könnt mir helfen, war schon bei einem anderen Forum wo ich es leider auch nicht verstanden habe. :/
Code (index.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="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>
Code(owl.carousel.css):
/*
* 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);
}
Code (owl.theme.css)
/*
* 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
}
Matthias Apsel
JürgenB