Manual Slideshow

Manual Slideshow
Displaying a manual slideshow with W3.CSS is very easy.
Just create many elements with the same class name:
Example
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
And two buttons to scroll the images:
Example
<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>
And add a JavaScript to select images:
Example
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Try It Yourself
JavaScript Explained
First, set the slideIndex to 1. (First picture)
Then call showDivs() to display the first image.
When the user clicks one of the buttons call plusDivs().
The plusDivs() function subtracts one or adds one to the slideIndex.
The showDiv() function hides (display="none") all elements with the

class name "mySlides", and displays (display="block") the element with
the given slideIndex.
If the slideIndex is higher than the number of elements (x.length), the

slideIndex is set to zero.
If the slideIndex is less than 1 it is set to number of elements (x.length).
To display an automatic slideshow is even simpler.
You only need a little different JavaScript:
Example
var slideIndex = 0;
carousel();
function carousel() {
var i;
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
setTimeout(carousel, 2000); // Change image every 2 seconds
}
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content" style="max-width:800px;position:relative">
<img class="mySlides" src="img_fjords.jpg" style="width:100%">

<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0"

onclick="plusDivs(-1)"></a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0"
onclick="plusDivs(1)"></a>
</div>
<script>
var slideIndex = 1;
}
var i;
if (n < 1) {slideIndex = x.length}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">

<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
var i;
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
HTML Slides
The slides do not have to be images.
They can be any HTML content:
Slide 3
Lorem ipsum
Example
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<h2 class="w3-center">HTML slides</h2>
<div class="w3-content" style="max-width:400px">
<div class="mySlides w3-container w3-red">

<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>
<img class="mySlides" src="img_monterosso.jpg" style="width:100%">
<div class="mySlides w3-container w3-xlarge w3-white w3-card-8">

<p><span class="w3-tag w3-yellow">New!</span>
<p>6 Crystal Glasses</p>
<p>Only $99 !!!</p>
</div>
<img class="mySlides" src="img_manarola.jpg" style="width:100%">
</div>
<script>
var slideIndex = 0;
carousel();
var i;
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
setTimeout(carousel, 2000);
}
</script>
</body>
</html>
Slideshow Caption
Trolltunga, Norway
Add a caption text for each image slide with the w3-display-* classes
(topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or
middle):
Example
<div class="w3-display-container mySlides">
<img src="img_fjords.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-
black">
Trolltunga, Norway
</div>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<body>
<div class="w3-container">
<h2>Slideshow Caption</h2>
<p>Add a caption text for each image slide with the w3-display-* classes
(topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or
middle).</p>
</div>
<div class="w3-content" style="max-width:800px;position:relative">

<img src="img_fjords.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-
black">
Trolltunga, Norway
</div>
</div>

<img src="img_lights.jpg" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16
w3-black">
Northern Lights, Norway
</div>
</div>

<img src="img_mountains.jpg" style="width:100%">
<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-
black">
Beautiful Mountains
</div>
</div>

<img src="img_forest.jpg" style="width:100%">
<div class="w3-display-topright w3-large w3-container w3-padding-16 w3-
black">
The Rain Forest
</div>
</div>

<img src="img_mountains.jpg" style="width:100%">
<div class="w3-display-middle w3-large w3-container w3-padding-16 w3-
black">
Mountains!
</div>
</div>
<a class="w3-btn-floating w3-hover-dark-grey"

style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)"></a>
<a class="w3-btn-floating w3-hover-dark-grey"
style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"></a>
</div>
<script>
var slideIndex = 1;
}
var i;
}
}
</script>
</body>
</html>
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the
slideshow, and which slide the user is currently viewing.
Prev Next
123
Example
<div class="w3-center">
<button class="w3-btn" onclick="plusDivs(-1)">❮
Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next
❯</button>
<button class="w3-btn demo" onclick="currentDiv(1)">1</button>

</div>
Try It Yourself
<!DOCTYPE html>
<html>
<style>
.mySlides {display:none}
</style>
<body>
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow,
and which slide the user is currently viewing.</p>
</div>

<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-btn" onclick="plusDivs(-1)"> Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next </button>
</div>
</div>
<script>
var slideIndex = 1;
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
var i;
var dots = document.getElementsByClassName("demo");
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
dots[slideIndex-1].className += " w3-red";
}
</script>
</body>
</html>
Another example:
Example
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottomleft" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-
border" onclick="currentDiv(1)"></span>
</div>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<style>
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>
<p>An example of using buttons to indicate how many slides there are in the
slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">

<div class="w3-center w3-section w3-large w3-text-white w3-display-
bottomleft" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki"
onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki"
onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white"
onclick="currentDiv(1)"></span>
</div>
</div>
<script>
var slideIndex = 1;
}
}
var i;
}
dots[i].className = dots[i].className.replace(" w3-white", "");
}
dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>
Images as Indicators
An example of using images as indicators:
Example
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%"
>
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"
>
<img class="mySlides" src="img_mountains_wide.jpg" style="width:10
0%">
<div class="w3-row-padding w3-section">

<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow"
src="img_nature_wide.jpg" onclick="currentDiv(1)">
</div>
src="img_fjords_wide.jpg" onclick="currentDiv(2)">
</div>
src="img_mountains_wide.jpg" onclick="currentDiv(3)">
</div>
</div>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<p>An example of using images to indicate how many slides there are in the
slideshow, and which image the user is currently viewing (red border).</p>
</div>

<div class="w3-row-padding w3-section">

src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)">
</div>
<img class="demo w3-border w3-hover-shadow" src="img_fjords_wide.jpg"
style="width:100%" onclick="currentDiv(2)">
</div>
src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
<script>
var slideIndex = 1;
}
}
var i;
}
dots[i].className = dots[i].className.replace(" w3-border-red", "");
}
dots[slideIndex-1].className += " w3-border-red";
}
</script>
</body>
</html>
Animated Slides
Slide or fade in an element from the top, bottom, left or right of the screen
with the w3-animate-* classes.
Example
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">
Try It Yourself
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<h2>Animated Slides</h2>
<p>Slide or fade in an element from the top, bottom, left or right of the
screen with the w3-animate-* classes.</p>
</div>
<img class="mySlides w3-animate-top" src="img_rr_01.jpg"

style="width:100%">
<img class="mySlides w3-animate-bottom" src="img_rr_02.jpg"
style="width:100%">
<img class="mySlides w3-animate-top" src="img_rr_03.jpg"
style="width:100%">
<img class="mySlides w3-animate-bottom" src="img_rr_04.jpg"
style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
var i;
}
myIndex++;
}
</script>
</body>
</html>
Faded Animation
The w3-animate-fading class fades an element in and out (takes about
10 seconds).
Example
<img class="mySlides w3-animate-fading" src="img_01.jpg">
Try It Yourself
<!DOCTYPE html>
<html>
<body>
<p>The w3-animate-fading class animates an element in and out (takes about
10 seconds).</p>
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg"

style="width:100%">
style="width:100%">
style="width:100%">
style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
var i;
}
myIndex++;
}
</script>
</body>
</html>
Templates
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-
black.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
<body id="myPage">


<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left"
style="display:none;z-index:2" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-
xxxlarge w3-text-teal">Close
<i class="fa fa-remove"></i>
</a>
<a href="#">Link 1</a>
</nav>


<div class="w3-top">
<ul class="w3-navbar w3-theme-d2 w3-left-align w3-large">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
<a class="w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);"
onclick="openNav()"><i class="fa fa-bars"></i></a>
</li>
<li><a href="#" class="w3-teal"><i class="fa fa-home w3-margin-
right"></i>Logo</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Link
1</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Link
2</a></li>
<li class="w3-hide-small w3-dropdown-hover">
<a href="#" title="Notifications">Dropdown <i class="fa fa-caret-
down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link</a>
</div>
</li>
<li class="w3-hide-small w3-right"><a href="#" class="w3-hover-teal"
title="Search"><i class="fa fa-search"></i></a></li>
</ul>
</div>


<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top"
style="margin-top:43px;">
<ul class="w3-navbar w3-left-align w3-large w3-theme">
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#" title="Notifications">Dropdown <i class="fa fa-caret-
down"></i></a>
<div class="w3-dropdown-content w3-light-grey w3-card-4">
</div>
</li>
</ul>
</div>
<div class="w3-display-container w3-animate-opacity">

<img class="testimg" src="img_sailboat.jpg" alt="boat"
style="width:100%;min-height:350px;max-height:600px;">
<div class="w3-container w3-display-bottomleft w3-margin-bottom">
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn w3-xlarge w3-theme w3-hover-teal" title="Go To
W3.CSS">LEARN W3.CSS</button>
</div>
</div>


<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn"><i class="fa fa-remove"></i></span>
<h4>Oh snap! We just showed you a modal..</h4>
<h5>Because we can <i class="fa fa-smile-o"></i></h5>
</header>
<p>Cool huh? Ok, enough teasing around..</p>
<p>Go to our <a class="w3-btn" href="/w3css/default.asp">W3.CSS
Tutorial</a> to learn more!</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal footer</p>
</footer>
</div>
</div>


<div class="w3-container w3-padding-64 w3-center">
<h2>OUR TEAM</h2>
<p>Meet the team - our office rats:</p>
<div class="w3-row"><br>
<div class="w3-quarter">
<img src="img_avatar.jpg" alt="Boss" style="width:45%" class="w3-circle
w3-hover-opacity">
<h3>Johnny Walker</h3>
<p>Web Designer</p>
</div>
w3-hover-opacity">
<h3>Rebecca Flex</h3>
<p>Support</p>
</div>
w3-hover-opacity">
<h3>Jan Ringo</h3>
<p>Boss man</p>
</div>
w3-hover-opacity">
<h3>Kai Ringo</h3>
<p>Fixer</p>
</div>
</div>
</div>


<div class="w3-row-padding w3-padding-64 w3-theme-l1">
<h2>Our Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="w3-card-2 w3-white">
<img src="img_fjords.jpg" alt="Vernazza" style="width:100%">
<h3>Customer 1</h3>
<h4>Trade</h4>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
</div>
</div>
</div>
<img src="img_lights.jpg" alt="Cinque Terre" style="width:100%">
<h3>Customer 2</h3>
<h4>Trade</h4>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
</div>
</div>
</div>
<img src="img_mountains.jpg" alt="Monterosso" style="width:100%">
<h3>Customer 3</h3>
<h4>Trade</h4>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
</div>
</div>
</div>
</div>


<div class="w3-container" style="position:relative">
<a onclick="w3_open()" class="w3-btn-floating-large w3-teal"
style="position:absolute;top:-28px;right:24px;z-index:0;">
<i class="fa fa-plus"></i></a>
</div>
<div class="w3-row-padding w3-center w3-padding-64">

<h2>PRICING</h2>
<p>Choose a pricing plan that fits your needs.</p><br>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-hover-shadow">
<li class="w3-theme">
<p class="w3-xlarge">Basic</p>
</li>
<li class="w3-padding-16"><b>10GB</b> Storage</li>
<li class="w3-padding-16"><b>10</b> Emails</li>
<li class="w3-padding-16"><b>10</b> Domains</li>
<li class="w3-padding-16"><b>Endless</b> Support</li>
<li class="w3-padding-16">
<h2 class="w3-wide"><i class="fa fa-usd"></i> 10</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-theme-l5 w3-padding-24">
<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-
check"></i> Sign Up</button>
</li>
</ul>
</div>

<li class="w3-theme-l2">
<p class="w3-xlarge">Pro</p>
</li>
</li>
</li>
</ul>
</div>
<li class="w3-theme">
<p class="w3-xlarge">Premium</p>
</li>
</li>
</li>
</ul>
</div>
</div>


<div class="w3-container w3-padding-64 w3-theme-l5">
<div class="w3-row">
<div class="w3-col m5">
<div class="w3-padding-16"><span class="w3-xlarge w3-border-teal w3-
bottombar">Contact Us</span></div>
<h3>Address</h3>
<p>Swing by for a cup of coffee, or whatever.</p>
<p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i> Chicago,
US</p>
<p><i class="fa fa-phone w3-text-teal w3-xlarge"></i> +00
1515151515</p>
<p><i class="fa fa-envelope-o w3-text-teal w3-
xlarge"></i> test@test.com</p>
</div>
<div class="w3-col m7">
<form class="w3-container w3-card-4 w3-padding-16 w3-white">
<div class="w3-group">
<label class="w3-label">Name</label>
<input class="w3-input" type="text">
</div>
<label class="w3-label">Email</label>
</div>
<label class="w3-label">Subject</label>
</div>
<input class="w3-check" type="checkbox" checked>
<label class="w3-validate">I Like it!</label>
<button type="button" class="w3-btn w3-right w3-
theme">Send</button>
</form>
</div>
</div>
</div>


<div id="googleMap" style="width:100%;height:420px;"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new

google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({

position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>


<footer class="w3-container w3-padding-32 w3-theme-d1 w3-center">
<h4>Follow Us</h4>
<a class="w3-btn-floating w3-teal" href="javascript:void(0)"
title="Facebook"><i class="fa fa-facebook"></i></a>
<a class="w3-btn-floating w3-teal" href="javascript:void(0)"
title="Twitter"><i class="fa fa-twitter"></i></a>
<a class="w3-btn-floating w3-teal" href="javascript:void(0)" title="Google
+"><i class="fa fa-google-plus"></i></a>
<a class="w3-btn-floating w3-teal w3-hide-small" href="javascript:void(0)"
title="Linkedin"><i class="fa fa-linkedin"></i></a>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>
<div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-

right">
<span class="w3-text w3-padding w3-teal w3-hide-small">Go To
Top</span>
<a class="w3-btn w3-theme" href="#myPage"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>


<script>
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "300px";
x.style.textAlign = "center";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Used to toggle the menu on smaller screens when clicking on the menu
button
function openNav() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Raleway">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<body class="w3-light-grey">



<div class="w3-container w3-center w3-padding-32">
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</div>


<div class="w3-hide-large w3-hide-small w3-margin-top w3-margin-bottom">
<div class="w3-container w3-white w3-padding-32">
<img src="img_avatar_g.jpg" alt="Me" style="width:150px" class="w3-left
w3-round-large w3-margin-right">
<span>Just me, myself and I, exploring the universe of uknownment. I have
a heart of love and an interest of lorem ipsum and mauris neque quam blog. I
want to share my world with you.</span>
</div>
</div>


<div class="w3-hide-large w3-hide-medium w3-margin-top w3-margin-
bottom">
<img src="img_avatar_g.jpg" style="width:100%" alt="Me">
<div class="w3-container w3-white">
<h4><b>My Name</b></h4>
<p>Just me, myself and I, exploring the universe of uknownment. I have a
heart of love and a interest of lorem ipsum and mauris neque quam blog. I
want to share my world with you.</p>
</div>
</div>



<div class="w3-col l8 s12">

<div class="w3-card-4 w3-margin w3-white">
<img src="img_woods.jpg" alt="Nature" style="width:100%">
<div class="w3-container w3-padding-8">
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7,
2014</span></h5>
</div>
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac
accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
<div class="w3-col m8 s12">
<p><button class="w3-btn w3-padding-large w3-white w3-border w3-
hover-border-black"><b>READ MORE </b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments </b>
<span class="w3-tag">0</span></span></p>
</div>
</div>
</div>
</div>
<hr>


<div class="w3-card-4 w3-margin w3-white">
<img src="img_bridge.jpg" alt="Norway" style="width:100%">
<div class="w3-container w3-padding-8">
<h3><b>BLOG ENTRY</b></h3>
<h5>Title description, <span class="w3-opacity">April 2,
2014</span></h5>
</div>
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac
accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
<div class="w3-col m8 s12">
<p><button class="w3-btn w3-padding-large w3-white w3-border w3-
hover-border-black"><b>READ MORE </b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments </b>
<span class="w3-badge">2</span></span></p>
</div>
</div>
</div>
</div>

</div>

<div class="w3-col l4 w3-hide-medium w3-hide-small">

<div class="w3-card-2 w3-margin w3-margin-top">
<img src="img_avatar_g.jpg" style="width:100%">
<h4><b>My Name</b></h4>
<p>Just me, myself and I, exploring the universe of uknownment. I have a
heart of love and a interest of lorem ipsum and mauris neque quam blog. I
want to share my world with you.</p>
</div>
</div><hr>


<div class="w3-card-2 w3-margin">
<div class="w3-container w3-padding">
<h4>Popular Posts</h4>
</div>
<ul class="w3-ul w3-hoverable w3-white">
<img src="img_workshop.jpg" alt="Image" class="w3-left w3-margin-
right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<img src="img_gondol.jpg" alt="Image" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
<img src="img_skies.jpg" alt="Image" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Dorum</span><br>
<span>Ultricies congue</span>
</li>
<li class="w3-padding-16 w3-hide-medium w3-hide-small">
<img src="img_rock.jpg" alt="Image" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Mingsum</span><br>
<span>Lorem ipsum dipsum</span>
</li>
</ul>
</div>
<hr>


<div class="w3-card-2 w3-margin">
<div class="w3-container w3-padding">
<h4>Tags</h4>
</div>
<p><span class="w3-tag w3-black w3-margin-bottom">Travel</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">New
York</span> <span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">London</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">IKEA</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">NORWAY</span> <span class="w3-tag w3-light-grey w3-
small w3-margin-bottom">DIY</span>
bottom">Ideas</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">Baby</span> <span class="w3-tag w3-light-grey w3-small
w3-margin-bottom">Family</span>
bottom">News</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">Clothing</span> <span class="w3-tag w3-light-grey w3-
small w3-margin-bottom">Shopping</span>
bottom">Sports</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">Games</span>
</p>
</div>
</div>


</div>


</div><br>


</div>


<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
<button class="w3-btn w3-disabled w3-padding-large w3-margin-
bottom">Previous</button>
<button class="w3-btn w3-padding-large w3-margin-bottom">Next
</button>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
family=Montserrat">
<style>
body,h1 {font-family: "Montserrat", sans-serif; font-weight: bold}
img {margin-bottom: -7px}
.w3-row-padding img {margin-bottom: 12px}
</style>
<body>


<nav class="w3-sidenav w3-black w3-card-2 w3-animate-top w3-center w3-
xxlarge" style="display:none;padding-top:220px" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-
jumbo w3-right w3-display-topright" style="padding:6px 24px">
</a>
<a href="javascript:void(0)" class="w3-text-grey w3-hover-
black">About</a>
black">Photos</a>
<a href="javascript:void(0)" class="w3-text-grey w3-hover-black">Shop</a>
black">Contact</a>
</nav>

<div class="w3-container w3-padding-32 w3-center w3-opacity w3-margin-

bottom">
<span class="w3-opennav w3-xxlarge w3-right w3-margin-right"
onclick="w3_open()"><i class="fa fa-bars"></i></span>
<div class="w3-clear"></div>
<h1>PHOTOLIO</h1>
<p>A template made by w3.css for photographers.</p>
<p class="w3-padding-16"><button class="w3-btn"
onclick="myFunction()">Toggle Grid Padding</button></p>
</div>


<div id="myGrid">
<div class="w3-third">
<img src="img_rocks.jpg" style="width:100%">
<img src="img_sound.jpg" style="width:100%">
<img src="img_woods.jpg" style="width:100%">
<img src="img_rock.jpg" style="width:100%">
<img src="img_nature.jpg" style="width:100%">
<img src="img_mist.jpg" style="width:100%">
</div>
<img src="img_coffee.jpg" style="width:100%">
<img src="img_bridge.jpg" style="width:100%">
<img src="img_notebook.jpg" style="width:100%">
<img src="img_london.jpg" style="width:100%">
<img src="img_rocks.jpg" style="width:100%">
<img src="img_avatar_g.jpg" style="width:100%">
</div>
<img src="img_mist.jpg" style="width:100%">
<img src="img_workbench.jpg" style="width:100%">
<img src="img_gondol.jpg" style="width:100%">
<img src="img_skies.jpg" style="width:100%">
<img src="img_lights.jpg" style="width:100%">
<img src="img_workshop.jpg" style="width:100%">
</div>
</div>
</div>

<div class="w3-clear"></div><br><br>


<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-
margin-top w3-opacity">
<div class="w3-xlarge w3-padding-32">
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-
official"></i></a>
<a href="#" class="w3-hover-text-red"><i class="fa fa-pinterest-
p"></i></a>
<a href="#" class="w3-hover-text-light-blue"><i class="fa fa-
twitter"></i></a>
<a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a>
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-
linkedin"></i></a>
</div>
<p style="font-weight:normal">Powered by <a
href="http://www.w3schools.com/w3css/default.asp"
</footer>
<script>
// Toggle grid padding
function myFunction() {
var x = document.getElementById("myGrid");
if (x.className.indexOf("w3-row-padding") == -1) {
x.className += " w3-row-padding";
} else {
x.className = x.className.replace(" w3-row-padding", "");
}
}
// Open and close sidenav

document.getElementById("mySidenav").style.width = "100%";
document.getElementById("mySidenav").style.display = "block";
}
}
</script>
</body>
</html>
Start
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
family=Montserrat">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-navbar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<body>


<ul class="w3-navbar w3-red w3-card-2 w3-top w3-left-align w3-large">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
<a class="w3-padding-large w3-hover-white w3-large w3-red"
href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation
Menu"><i class="fa fa-bars"></i></a>
</li>
<li><a href="#" class="w3-padding-large w3-white">Home</a></li>
<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-
white">Link 1</a></li>
</ul>


<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top"
style="margin-top:51px">
<ul class="w3-navbar w3-left-align w3-large w3-black">
<li><a class="w3-padding-large" href="#">Link 1</a></li>
</ul>
</div>


<div class="w3-container w3-red w3-center w3-padding-128">
<h1 class="w3-margin w3-jumbo">START PAGE</h1>
<p class="w3-xlarge">Template by w3.css</p>
<button class="w3-btn w3-padding-16 w3-large w3-margin-top">Get
Started</button>
</div>


<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>Lorem Ipsum</h1>
<h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</h5>
<p class="w3-text-grey">Lorem ipsum dolor sit amet, consectetur
ut aliquip ex ea commodo consequat. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-center">

<i class="fa fa-anchor w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>


<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-third w3-center">
<i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>
</div>
<div class="w3-twothird">
<h1>Lorem Ipsum</h1>
<h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur
ut aliquip ex ea commodo consequat.</h5>
<p class="w3-text-grey">Lorem ipsum dolor sit amet, consectetur

ut aliquip ex ea commodo consequat. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">

<h1 class="w3-margin w3-xlarge">Quote of the day: live life</h1>
</div>


<footer class="w3-container w3-padding-64 w3-center w3-opacity">
<div class="w3-xlarge w3-padding-32">
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-
official"></i></a>
<a href="#" class="w3-hover-text-red"><i class="fa fa-pinterest-
p"></i></a>
<a href="#" class="w3-hover-text-light-blue"><i class="fa fa-
twitter"></i></a>
<a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a>
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-
linkedin"></i></a>
</div>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
family=Raleway">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {font-weight:bold}
</style>
<body class="w3-light-grey w3-content" style="max-width:1600px">

<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-
index:3;width:300px;" id="mySidenav"><br>
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo
w3-padding" title="close menu">
</a>
<img src="img_avatar_g2.jpg" style="width:45%;" class="w3-
round"><br><br>
<h4 class="w3-padding-0"><b>PORTFOLIO</b></h4>
<p class="w3-text-grey">Template by W3.CSS</p>
</div>
<a href="#" class="w3-padding w3-text-teal">HOME</a>
<a href="#" class="w3-padding">ABOUT</a>
<a href="#" class="w3-padding">PORTFOLIO</a>
<a href="#" class="w3-padding">SHOP</a>
<a href="#" class="w3-padding">CONTACT</a>
<div class="w3-section w3-padding-top w3-large">

<a href="#" class="w3-hover-white w3-hover-text-indigo w3-show-inline-
block"><i class="fa fa-facebook-official"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-red w3-show-inline-
block"><i class="fa fa-pinterest-p"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-light-blue w3-show-inline-
block"><i class="fa fa-twitter"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-grey w3-show-inline-
block"><i class="fa fa-flickr"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-indigo w3-show-inline-
block"><i class="fa fa-linkedin"></i></a>
</div>
</nav>

<div class="w3-overlay w3-hide-large w3-animate-opacity"
onclick="w3_close()" style="cursor:pointer" title="close side menu"
id="myOverlay"></div>


<div class="w3-main" style="margin-left:300px">


<header class="w3-container">
<a href="#"><img src="img_avatar_g2.jpg" style="width:65px;"
class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey"
onclick="w3_open()"><i class="fa fa-bars"></i></span>
<h1><b>My Portfolio</b></h1>
<div class="w3-section w3-bottombar w3-padding-16">
<span class="w3-margin-right">Filter:</span>
<button class="w3-btn">ALL</button>
<button class="w3-btn w3-white"><i class="fa fa-diamond w3-margin-
right"></i>Design</button>
<button class="w3-btn w3-white w3-hide-small"><i class="fa fa-photo w3-
margin-right"></i>Photos</button>
<button class="w3-btn w3-white w3-hide-small"><i class="fa fa-map-pin
w3-margin-right"></i>Art</button>
</div>
</header>


<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img_mountains.jpg" alt="Norway" style="width:100%"
class="w3-hover-opacity">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<img src="img_lights.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
</div>
</div>
<div class="w3-third w3-container">
<img src="img_nature.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
</div>
</div>
</div>


<img src="img_fjords.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
</div>
</div>
<img src="img_lights.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
</div>
</div>
<div class="w3-third w3-container">
<img src="img_mountains.jpg" alt="Norway" style="width:100%"
class="w3-hover-opacity">
</div>
</div>
</div>


<div class="w3-center w3-padding-32">
<ul class="w3-pagination">
<li><a class="w3-black" href="#">1</a></li>
<li><a class="w3-hover-black" href="#">2</a></li>
<li><a class="w3-hover-black" href="#"></a></li>
</ul>
</div>


<footer class="w3-container w3-padding-32 w3-white">
<h3>FOOTER</h3>
</div>
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<img src="img_workshop.jpg" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<img src="img_gondol.jpg" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<h3>POPULAR TAGS</h3>
<p>
<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span
class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">London</span>
bottom">IKEA</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">NORWAY</span> <span class="w3-tag w3-dark-grey w3-
small w3-margin-bottom">DIY</span>
bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Baby</span> <span class="w3-tag w3-dark-grey w3-small
w3-margin-bottom">Family</span>
bottom">News</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Clothing</span> <span class="w3-tag w3-dark-grey w3-
small w3-margin-bottom">Shopping</span>
bottom">Sports</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Games</span>
</p>
</div>
</div>
</footer>


</div>
<script>
// Script to open and close sidenav
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
Js data3
/* W3Data ver 1.1 by W3Schools.com */
var w3DataObject = {};
function w3DisplayData(id, data) {
var htmlObj, htmlTemplate, html, arr = [], a, l, rowClone, x, j, i,
ii, cc, repeat, repeatObj, repeatX = "";
htmlObj = document.getElementById(id);
htmlTemplate = w3InitTemplate(id, htmlObj);
html = htmlTemplate.cloneNode(true);
arr = w3GetElementsByAttribute(html, "w3-repeat");
l = arr.length;
for (j = (l-1); j >= 0; j -= 1) {
cc = arr[j].getAttribute("w3-repeat").split(" ");
if (cc.length == 1) {
repeat = cc[0];
} else {
repeatX = cc[0];
repeat = cc[2];
}
arr[j].removeAttribute("w3-repeat");
repeatObj = data[repeat];
if (repeatObj && typeof repeatObj == "object" && repeatObj.length
!= "undefined") {
i = 0;
for (x in repeatObj) {
i += 1;
rowClone = arr[j];
rowClone = w3NeedleInHaystack(rowClone, "element",
repeatX, repeatObj[x]);
a = rowClone.attributes;
for (ii = 0; ii < a.length; ii += 1) {
a[ii].value = w3NeedleInHaystack(a[ii], "attribute",
repeatX, repeatObj[x]).value;
}
(i === repeatObj.length) ?
arr[j].parentNode.replaceChild(rowClone, arr[j]) :
arr[j].parentNode.insertBefore(rowClone, arr[j]);
}
} else {
console.log("w3-repeat must be an array. " + repeat + " is
not an array.");
continue;
}
}
html = w3NeedleInHaystack(html, "element");
htmlObj.parentNode.replaceChild(html, htmlObj);
function w3InitTemplate(id, obj) {
var template;
template = obj.cloneNode(true);
if (w3DataObject.hasOwnProperty(id)) {return w3DataObject[id];}
w3DataObject[id] = template;
return template;
}
function w3GetElementsByAttribute(x, att) {
var arr = [], arrCount = -1, i, l, y =
x.getElementsByTagName("*"), z = att.toUpperCase();
l = y.length;
for (i = -1; i < l; i += 1) {
if (i == -1) {y[i] = x; }
if (y[i].getAttribute(z) !== null) {arrCount += 1;
arr[arrCount] = y[i];}
}
return arr;
}
function w3NeedleInHaystack(elmnt, typ, repeatX, x) {
var value, rowClone, pos1, haystack, pos2, needle = [],
needleToReplace, i, cc, r;
rowClone = elmnt.cloneNode(true);
pos1 = 0;
while (pos1 > -1) {
haystack = (typ == "attribute") ? rowClone.value :
rowClone.innerHTML;
pos1 = haystack.indexOf("{{", pos1);
if (pos1 === -1) {break; }
pos2 = haystack.indexOf("}}", pos1 + 1);
needleToReplace = haystack.substring(pos1 + 2, pos2);
needle = needleToReplace.split("||");
value = undefined;
for (i = 0; i < needle.length; i += 1) {
needle[i] = needle[i].replace(/^\s+|\s+$/gm,''); //trim
//value = ((x && x[needle[i]]) || (data &&
data[needle[i]]));
if (x) {value = x[needle[i]];}
if (value == undefined && data) {value =
data[needle[i]];}
if (value == undefined) {
cc = needle[i].split(".");
if (cc[0] == repeatX) {value = x[cc[1]]; }
}
if (needle[i] == repeatX) {value = x; }
}
if (needle[i].substr(0,1) == '"') {
value = needle[i].replace(/"/g, "");
} else if (needle[i].substr(0,1) == "'") {
value = needle[i].replace(/'/g, "");
}
}
if (value != undefined) {break;}
}
if (value != undefined) {
r = "{{" + needleToReplace + "}}";
if (typ == "attribute") {
rowClone.value = rowClone.value.replace(r, value);
} else {
w3ReplaceHTML(rowClone, r, value);
}
}
pos1 = pos1 + 1;
}
return rowClone;
}
function w3ReplaceHTML(a, r, result) {
var b, l, i, a, x, y, j, ll, nam;
if (a.hasAttributes()) {
b = a.attributes;
l = b.length;
for (i = 0; i < l; i += 1) {
if (b[i].value.indexOf(r) > -1) {b[i].value =
b[i].value.replace(r, result); }
}
}
x = a.getElementsByTagName("*");
l = x.length;
a.innerHTML = a.innerHTML.replace(r, result);
}
}
function w3IncludeHTML() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
w3IncludeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
function w3Http(target, readyfunc, xml, method) {
var httpObj;
if (!method) {method = "GET"; }
if (window.XMLHttpRequest) {
httpObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
if (httpObj) {
if (readyfunc) {httpObj.onreadystatechange = readyfunc; }
httpObj.open(method, target, true);
httpObj.send(xml);
}
}
Para hacer tablas
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script>
var myObject = {"customers":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Ana Trujillo Emparedados y helados","City":"Mxico
D.F.","Country":"Mexico"},
{"CustomerName":"Antonio Moreno Taquera","City":"Mxico
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbkp","City":"Lule","Country":"Sweden"},
{"CustomerName":"Blauer See
Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel pre et
fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Blido Comidas
preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar
Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos
Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"Mxico
{"CustomerName":"Chop-suey
Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comrcio Mineiro","City":"So Paulo","Country":"Brazil"}
]};
</script>
<body>
<table id="id01" class="w3-table w3-bordered w3-striped">

<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script>
</body>
</html>

Manual Slideshow

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Slideshow

Cargado por

Copyright:

Formatos disponibles

Manual Slideshow

Displaying a manual slideshow with W3.CSS is very easy.

Just create many elements with the same class name:

And two buttons to scroll the images:

And add a JavaScript to select images:

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs().

The plusDivs() function subtracts one or adds one to the slideIndex.

The showDiv() function hides (display="none") all elements with the

If the slideIndex is higher than the number of elements (x.length), the

If the slideIndex is less than 1 it is set to number of elements (x.length).

To display an automatic slideshow is even simpler.

You only need a little different JavaScript:

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content" style="max-width:800px;position:relative">

<img class="mySlides" src="img_fjords.jpg" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0"

<h2 class="w3-center">Automatic Slideshow</h2>

<div class="w3-content w3-section" style="max-width:500px">

They can be any HTML content:

<div class="w3-content" style="max-width:400px">

<div class="mySlides w3-container w3-red">

<img class="mySlides" src="img_monterosso.jpg" style="width:100%">

<div class="mySlides w3-container w3-xlarge w3-white w3-card-8">

<img class="mySlides" src="img_manarola.jpg" style="width:100%">

<div class="w3-content" style="max-width:800px;position:relative">

<div class="w3-display-container mySlides">

<div class="w3-display-container mySlides">

<div class="w3-display-container mySlides">

<div class="w3-display-container mySlides">

<div class="w3-display-container mySlides">

<a class="w3-btn-floating w3-hover-dark-grey"

<button class="w3-btn demo" onclick="currentDiv(1)">1</button>

<div class="w3-content" style="max-width:800px">

<div class="w3-content w3-display-container" style="max-width:800px">

<div class="w3-row-padding w3-section">

<div class="w3-content" style="max-width:1200px">

<div class="w3-row-padding w3-section">

<img class="mySlides w3-animate-top" src="img_rr_01.jpg"

<img class="mySlides w3-animate-fading" src="img_rr_01.jpg"

<div class="w3-display-container w3-animate-opacity">

<div class="w3-row-padding w3-center w3-padding-64">

<div class="w3-third w3-margin-bottom">

var map = new

var marker = new google.maps.Marker({

google.maps.event.addDomListener(window, 'load', initialize);

<div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-

<!-- w3-content defines a container for fixed size centered content,