html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<!--
created by AD - Aug 20, 2017
SoloSlide V1 - method to slideshow array images with dynamically created elements using jQuery - Thanks a lot for your like and comment. :)
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<header></header>
<div class="mycontainer">
<script>
makeSoloSlides();
showImageswithText();
</script>
</div>
<br>
<div class="myindicator">
<script>showIndicators();</script>
</div>
<div class="footer">
<script>jumptootherprograms();</script>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url(http://fonts.googleapis.com/css?family=Kaushan+Script:bold);
:root { --bgcolor: #9cf; }
body {
align-items: center;
justify-content: center;
margin:15px 10px 10px 10px;
width:100%;
height:auto;
background-color: var(--bgcolor);
}
p, div { font-family: 'Kaushan Script', Helvetica, Arial, sans-serif;}
.SoloSlide {display:block;}
.mycontainer {
position: relative;
margin-left:50px;
margin-top:100px;
text-align: center;
width:70%;
border-radius:15px;
}
.cover {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// created by AD `Aug 20, 2017
$(document).ready(function() {
/*
SoloSlide is show logo courses in SoloLearn with dynamically created elements array div,img using jQuery - make less effort to write in html code
thanks for the like & comments.
*/
showSlides();
showContentHeader();
});
function showContentHeader() {
$('<div/>',{class:'me bdr'})
.appendTo('header');
$("header").append("<p>I gave the name SoloSlide. A simple program to slideshow images with dynamically elements ~ <div>,<img>,text desc. & indicators (a small round mark or dots).Thanks a lot for your like & comment.</p>")
}
var loc = 'https://www.sololearn.com/Icons/Courses/';
var a = new Array(13);
a[0] = new Array('https://api.sololearn.com/Uploads/Avatars/1.jpg','SoloLearn: Learn to Code for Free');
a[1] = new Array(loc+'1014.png','HTML');
a[2] = new Array(loc+'1024.png','JS');
a[3] = new Array(loc+'1023.png','CSS');
a[4] = new Array(loc+'1059.png','PHP');
a[5] = new Array(loc+'1068.png','Java');
a[6] = new Array(loc+'1060.png','SQL');
a[7] = new Array(loc+'1082.png','JQuery');
a[8] = new Array(loc+'1073.png','Python');
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run