MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds slider on static page per 3 sec, stops on option click.

This commit is contained in:
apapachristou 2020-09-09 11:08:53 +03:00
parent 1737c96621
commit efaebe8574
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/src/assets/splash/index.html
View File

@ -103,13 +103,13 @@
<p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p> <p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p>
</div> </div>
<div class="options"> <div class="options">
<div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1')"> <div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1'); clearInterval(slides)">
<p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p> <p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p>
</div> </div>
<div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2')"> <div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2'); clearInterval(slides)">
<p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p> <p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p>
</div> </div>
<div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3')"> <div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3'); clearInterval(slides)">
<p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p> <p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p>
</div> </div>
</div> </div>
@ -393,4 +393,4 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

16
dmp-frontend/src/assets/splash/js/scripts.js
View File

@ -45,3 +45,19 @@ window.onclick = function (event) {
this.closeOpenDropdowns(); this.closeOpenDropdowns();
} }
} }
// Slideshow per 3 sec, stops on option click
window.onload = function slideImages() {
var x = -1;
slides = setInterval(function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById('template-preview').src = images[x];
toggleClass(['id1','id2','id3'], 'id'.concat((x + 1).toString()));
}, 3000);
}
var slides;
var images = [];
images[0] = 'assets/img/template-preview-1.svg';
images[1] = 'assets/img/template-preview-2.svg';
images[2] = 'assets/img/template-preview-3.svg';