Apparel Software

Powered by Blogger.

Slider Programming by JQuery Java Script Part2

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


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>
<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="">


<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 class="menu">
<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>


<div class="panorama_slider">
<div id="myPano" class="pano">
<div class="controls">
<a href="#" class="left">&laquo;</a>
<a href="#" class="right">&raquo;</a>
<script src="jq/jqeury-1.8.3"></script>
<script src="jq/jquery.pano.js"></script>
img: "images/sphere.jpg"




CSSCode for Panorama Slider

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

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

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

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

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

{ width:30px; height:30px; margin:5px 5px 0px 10px; float:left;
background-color:#875; border-radius:6px;}
{ width:30px; height:30px; margin:5px 5px 0px 0px; float:left;
background-color:#875; border-radius:6px;}
{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;}

{ 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;

.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;}


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

Share :

Facebook Twitter Google+ Linkedin
0 Comments "Slider Programming by JQuery Java Script Part2"

Back To Top