simongehrig.de/JS-Slider
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added new Logic to position image which fixes the z-index problem.

Browse Source 
Added Start/Stop Buttons
Added css reset for resizing the window
Added transition reset for resizing and page loading

TODO Selector configuration for easier implementation
This commit is contained in:
Simon Gehrig
2017-02-23 12:12:01 +01:00
parent 60cbcf1efe
commit 8c7959d1d4
3 changed files with 411 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slider.html
+16 -4
View File
@@ -20,14 +20,14 @@
<img src="https://unsplash.it/750/500/?random">
<!--<img src="http://lorempixel.com/750/500/">-->
<a href="#">
<div class="bannertext">Dies ist ein Text.</div>
<div class="bannertext">Fotos von unsplash.it.</div>
</a>
</div>
<div class="banneritem">
<img src="https://unsplash.it/750/501/?random">
<!--<img src="http://lorempixel.com/750/501/">-->
<a href="#">
<div class="bannertext">Dies ist ein Text.</div>
<div class="bannertext">Dies ist ein längerer Text.</div>
</a>
</div>
<div class="banneritem">
@@ -41,12 +41,24 @@
<img src="https://unsplash.it/750/503/?random">
<!--<img src="http://lorempixel.com/750/503/">-->
<a href="#">
<div class="bannertext">Dies ist ein Text.</div>
<div class="bannertext">Wort.</div>
</a>
</div>
<div class="banneritem">
<img src="https://unsplash.it/750/504/?random">
<!--<img src="http://lorempixel.com/750/503/">-->
<a href="#">
<div class="bannertext">Simon hat das geschrieben.</div>
</a>
</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<footer>