[FONT=&]Schönen guten Nachmittag,[/FONT]
[FONT=&]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:
)[/FONT]
[FONT=&]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.
Mein Code (index.html):
Code
[/FONT][/COLOR]/** 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}[COLOR=#141414][FONT=&]
[/FONT][/COLOR][FONT=&]
Mein Code (owl.carousel.css):
Code
[/FONT][/COLOR]/* * 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);}[COLOR=#141414][FONT=&]
[/FONT][/COLOR]
[FONT=&]
[/FONT][FONT=&]Mein Code (owl.theme.css):
[/FONT]
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}