Changeset 1432 in t29-www


Ignore:
Timestamp:
Jan 9, 2018, 11:35:29 PM (21 months ago)
Author:
sven
Message:

Revert der Slider-Veränderungen von heute = alles wieder auf Anfang.

Files:
2 deleted
6 edited

Legend:

Unmodified
Added
Removed
  • de/index.php

    r1431 r1432  
    88
    99<header class="teaser seitenstart">
    10 <div class="slider play">
     10<div class="slider-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
    1111        <!-- Erstes Bild (Noscript: Default) -->
    12         <div class="slide slide1">
     12        <div class="slide">
    1313                <h2>
    1414                Vergangenheit verstehen <br>
     
    1919
    2020
    21         <div class="slide slide2">
     21        <div class="slide js">
    2222                <h2>
    2323                Der Beginn der EDV<br>
     
    2727
    2828         
    29         <div class="slide slide3">
     29        <div class="slide js">
    3030                <h2>
    3131                Die Zeit der Lochkarten<br>
     
    3434        </div>
    3535       
    36  </div>
     36 
     37</div>
    3738</header>
    3839
  • lib/ressourceloader.php

    r1431 r1432  
    209209                                $urls[] = 'http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAraTKZ5cINardZ8ITNVssKhRcOoEBtCgYLJRQznXYEV8m1M3fRRRT9wMSvFwhyo62fD3KyiwQxe5ruw';
    210210                                break;
     211                        case 'startseite':
     212                                $urls[] = '/shared/js-v6/libs/flickity.pkgd.min.js'; // Caroussel-Slider
     213                                break;
    211214                }
    212215                return $urls;
  • shared/css-v6/pagestyles/startseite.css

    r1431 r1432  
    251251
    252252
    253 /*** Slider Styles ***/
     253/*** Slider (http://meandmax.github.io/lory/) Styles ***/
    254254/*** Started 2018-01-07 ***/
    255255
     
    258258}
    259259
    260 /* Pure CSS fade-in-out transition */
    261 
    262 .slider {
    263   width: 940px;
    264   height: 290px;
     260/*! Flickity v2.0.10
     261http://flickity.metafizzy.co
     262---------------------------------------------- */
     263
     264.flickity-enabled {
    265265  position: relative;
    266266}
    267267
    268 /* Pause-Button */
    269 .slider .pause {
    270   display: inline-block;
    271   position: absolute;
    272   right: 32px;
    273   top: 32px;
    274   z-index: 100;
    275 }
    276 
    277 .slider .slide {
     268.flickity-enabled:focus { outline: none; }
     269
     270.flickity-viewport {
     271  overflow: hidden;
     272  position: relative;
     273  height: 100%;
     274}
     275
     276.flickity-slider {
    278277  position: absolute;
    279278  width: 100%;
    280279  height: 100%;
    281   }
    282 
    283 /* Dauer = Gesamter Prozess. */
    284 .play .slide1 { animation:fade1 15s infinite; -webkit-animation:fade1 15s infinite; }
    285 .play .slide2 { animation:fade2 15s infinite; -webkit-animation:fade2 15s infinite; }
    286 .play .slide3 { animation:fade3 15s infinite; -webkit-animation:fade3 15s infinite; }
    287 
    288 @keyframes fade1
    289 {
    290   0%   {opacity:1}
    291   33.333% { opacity: 0}
    292   66.666% { opacity: 0}
    293   100% { opacity: 1}
    294 }
    295 @keyframes fade2
    296 {
    297   0%   {opacity:0}
    298   33.333% { opacity: 1}
    299   66.666% { opacity: 0 }
    300   100% { opacity: 0}
    301 }
    302 @keyframes fade3
    303 {
    304   0%   {opacity:0}
    305   33.333% { opacity: 0}
    306   66.666% { opacity: 1}
    307   100% { opacity: 0}
    308 }
    309 
    310 
    311 
    312 
    313 
    314 
     280}
     281
     282/* draggable */
     283
     284.flickity-enabled.is-draggable {
     285  -webkit-tap-highlight-color: transparent;
     286          tap-highlight-color: transparent;
     287  -webkit-user-select: none;
     288     -moz-user-select: none;
     289      -ms-user-select: none;
     290          user-select: none;
     291}
     292
     293.flickity-enabled.is-draggable .flickity-viewport {
     294  cursor: move;
     295  cursor: -webkit-grab;
     296  cursor: grab;
     297}
     298
     299.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
     300  cursor: -webkit-grabbing;
     301  cursor: grabbing;
     302}
     303
     304/* ---- previous/next buttons ---- */
     305
     306.flickity-prev-next-button {
     307  position: absolute;
     308  top: 50%;
     309  width: 44px;
     310  height: 44px;
     311  border: none;
     312  border-radius: 50%;
     313  background: white;
     314  background: hsla(0, 0%, 100%, 0.75);
     315  cursor: pointer;
     316  /* vertically center */
     317  -webkit-transform: translateY(-50%);
     318          transform: translateY(-50%);
     319}
     320
     321.flickity-prev-next-button:hover { background: white; }
     322
     323.flickity-prev-next-button:focus {
     324  outline: none;
     325  box-shadow: 0 0 0 5px #09F;
     326}
     327
     328.flickity-prev-next-button:active {
     329  opacity: 0.6;
     330}
     331
     332.flickity-prev-next-button.previous { left: 10px; }
     333.flickity-prev-next-button.next { right: 10px; }
     334/* right to left */
     335.flickity-rtl .flickity-prev-next-button.previous {
     336  left: auto;
     337  right: 10px;
     338}
     339.flickity-rtl .flickity-prev-next-button.next {
     340  right: auto;
     341  left: 10px;
     342}
     343
     344.flickity-prev-next-button:disabled {
     345  opacity: 0.3;
     346  cursor: auto;
     347}
     348
     349.flickity-prev-next-button svg {
     350  position: absolute;
     351  left: 20%;
     352  top: 20%;
     353  width: 60%;
     354  height: 60%;
     355}
     356
     357.flickity-prev-next-button .arrow {
     358  fill: #333;
     359}
     360
     361/* ---- page dots ---- */
     362
     363.flickity-page-dots {
     364  position: absolute;
     365  width: 100%;
     366  bottom: -25px;
     367  padding: 0;
     368  margin: 0;
     369  list-style: none;
     370  text-align: center;
     371  line-height: 1;
     372}
     373
     374.flickity-rtl .flickity-page-dots { direction: rtl; }
     375
     376.flickity-page-dots .dot {
     377  display: inline-block;
     378  width: 10px;
     379  height: 10px;
     380  margin: 0 8px;
     381  background: #333;
     382  border-radius: 50%;
     383  opacity: 0.25;
     384  cursor: pointer;
     385}
     386
     387.flickity-page-dots .dot.is-selected {
     388  opacity: 1;
     389}
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License