Slider Programming by JQuery Java Script Part2

Monday, May 15, 2017

Slider Programming by JQuery

Date: 08/05/2017

We should remember all slider name for outsourcing. e.g. Panorama slider, Kemburn, Fade Slider
Scrol bar slide show is also very important for web developer

Assignment:

Panorama Slider with 3 Social icon in menu bar. This assign is compiled by shariar shakil of our batch.

Image/Outpur for Panorama Slider

HTML Code for Panorama Slider

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/panorama.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
<div class="main_layout">
<div class="header">

<div class="iconBox">
<div class="fb-icon"><a href="#"><i class="fa fa-facebook" id="fb"></i></a></div>
<div class="twitter-icon"><a href="#"><i class="fa fa-twitter" id="twitter"></i></a></div>
<div class="google-icon"><a href="#"><i class="fa fa-google-plus" id="google"></i></a></div>

</div>

</div>

<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Buying</a></li>
<li><a href="index.html">Moving</a></li>
<li><a href="index.html">FAQ</a></li>
<li><a href="index.html">Contact</a></li>
</ul>

</div>

<div class="panorama_slider">
<div id="myPano" class="pano">
<div class="controls">
<a href="#" class="left">«</a>
<a href="#" class="right">»</a>
</div>
</div>
<script src="jq/jqeury-1.8.3"></script>
<script src="jq/jquery.pano.js"></script>
<script>
$(document).ready(function(){
$("#myPano").pano({
img: "images/sphere.jpg"
});
});
</script>

</div>

</div>

</body>
</html>

CSSCode for Panorama Slider

@charset "utf-8";
/* CSS Document */

body
{ background-color:#fff; margin:0px;}

.main_layout
{ width:960px; height:1000px; margin:0px auto; background-color:#fff;}

.header
{ width:900px; height:100px; margin:10px 30px 5px 30px; float:left; background:#F60;}

.iconBox
{ width:140px; height:40px; margin:30px 0px 0px 680px; float:left;}

.fb-icon
{ width:30px; height:30px; margin:5px 5px 0px 10px; float:left;
background-color:#875; border-radius:6px;}
.twitter-icon
{ width:30px; height:30px; margin:5px 5px 0px 0px; float:left;
background-color:#875; border-radius:6px;}
.google-icon
{width:30px; height:30px; margin:5px 0px 0px 0px; float:left;
background-color:#875; border-radius:6px;}

#fb{ font-size:18px; color:#FFFBF0; margin-left:9px; margin-top:6px;}
#twitter{ font-size:18px; color:#FFFBF0; margin-left:5px; margin-top:5px;}
#google{ font-size:18px; color:#FFFBF0; margin-left:5px; margin-top:5px;}

.menu
{ width:600px; height:35px; margin:0px 180px 5px 180px; float:left; background-color:#F60;}

.menu ul{ margin:0px; padding:0px; line-height:35px;}

.menu li{ margin:0px;
list-style:none; position:relative;
float:left;}

.menu a{
color:#FFFBF0; font-weight:bold;
font-size:14px; text-decoration:none;
padding:8px 30px; text-align:center;
}

.menu a:hover{ background:#2A3F55; text-decoration:underline;}

.panorama_slider

{ width:900px; height:350px; margin:0px 30px 0px 30px; float:left; background-color:f;}

Lectra Wilcom