Staff Carousel One
JULIA B. MCRAFLANE
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
AMY CLAYTON
PROGRAMMER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
FRED PENNER
WEB DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
MARTINA SAIZ
UI DESIGNER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JOSEPH B. SEWARD
DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JANE LOPEZ
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JAMES RIDGWAY
IT MANAGER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
PATRICIA BURNS
SYSTEM ADMIN
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
TERRY THOMPSON
REVIEWER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Staff Carousel One
<div class="ms-staff-carousel">
<!-- masterslider -->
<div class="master-slider" id="masterslider1">
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/1.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>JULIA B. MCRAFLANE</h3>
<h4>COMPANY CEO</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/2.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>AMY CLAYTON</h3>
<h4>PROGRAMMER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/3.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>FRED PENNER</h3>
<h4>WEB DEVELOPER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<!-- end of masterslider -->
<div class="ms-staff-info" id="staff-info1"> </div>
</div>
$(document).ready(function() {
var slider = new MasterSlider();
slider.setup('masterslider1' , {
loop:true,
width:240,
height:240,
speed:20,
view:'focus',
preload:'all',
space:0,
wheel:true
});
slider.control('arrows');
slider.control('slideinfo',{insertTo:'#staff-info1'});
});
<!-- add the following CSS and JS setting of Master Slider before </head> end tag -->
<!-- Master Slider CSS settings -->
<link href="js/master-slider/style/masterslider.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/skins/default/style.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/staffcarousel/style/ms-staff-style.css" rel="stylesheet" type="text/css"/>
<!-- Master Slider SCRIPTS -->
<script src="js/master-slider/masterslider.min.js"></script>
<style type="text/css">.ms-staff-carousel .ms-staff-info{min-height: 200px;}</style>
Staff Carousel Two
JULIA B. MCRAFLANE
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
AMY CLAYTON
PROGRAMMER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
FRED PENNER
WEB DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
MARTINA SAIZ
UI DESIGNER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JOSEPH B. SEWARD
DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JANE LOPEZ
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JAMES RIDGWAY
IT MANAGER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
PATRICIA BURNS
SYSTEM ADMIN
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
TERRY THOMPSON
REVIEWER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Staff Carousel Two
<div class="ms-staff-carousel">
<!-- masterslider -->
<div class="master-slider" id="masterslider2">
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/1.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>JULIA B. MCRAFLANE</h3>
<h4>COMPANY CEO</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/2.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>AMY CLAYTON</h3>
<h4>PROGRAMMER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/3.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>FRED PENNER</h3>
<h4>WEB DEVELOPER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<!-- end of masterslider -->
<div class="ms-staff-info" id="staff-info2"> </div>
</div>
$(document).ready(function() {
var slider = new MasterSlider();
slider.setup('masterslider2' , {
loop:true,
width:240,
height:240,
speed:20,
view:'fadeBasic',
preload:0,
space:0,
wheel:true
});
slider.control('arrows');
slider.control('slideinfo',{insertTo:'#staff-info2'});
});
<!-- add the following CSS and JS setting of Master Slider before </head> end tag -->
<!-- Master Slider CSS settings -->
<link href="js/master-slider/style/masterslider.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/skins/default/style.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/staffcarousel/style/ms-staff-style.css" rel="stylesheet" type="text/css"/>
<!-- Master Slider SCRIPTS -->
<script src="js/master-slider/masterslider.min.js"></script>
<style type="text/css">.ms-staff-carousel .ms-staff-info{min-height: 200px;}</style>
Staff Carousel Three
JULIA B. MCRAFLANE
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
AMY CLAYTON
PROGRAMMER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
FRED PENNER
WEB DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
MARTINA SAIZ
UI DESIGNER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JOSEPH B. SEWARD
DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JANE LOPEZ
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JAMES RIDGWAY
IT MANAGER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
PATRICIA BURNS
SYSTEM ADMIN
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
TERRY THOMPSON
REVIEWER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Staff Carousel Three
<div class="ms-staff-carousel ms-round">
<!-- masterslider -->
<div class="master-slider" id="masterslider3">
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/1.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>JULIA B. MCRAFLANE</h3>
<h4>COMPANY CEO</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/2.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>AMY CLAYTON</h3>
<h4>PROGRAMMER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/3.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<h3>FRED PENNER</h3>
<h4>WEB DEVELOPER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<!-- end of masterslider -->
<div class="ms-staff-info" id="staff-info3"> </div>
</div>
$(document).ready(function() {
var slider = new MasterSlider();
slider.setup('masterslider3' , {
loop:true,
width:240,
height:240,
speed:20,
view:'focus',
preload:0,
space:0,
space:35,
viewOptions:{centerSpace:1.6}
});
slider.control('arrows');
slider.control('slideinfo',{insertTo:'#staff-info3'});
});
<!-- add the following CSS and JS setting of Master Slider before </head> end tag -->
<!-- Master Slider CSS settings -->
<link href="js/master-slider/style/masterslider.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/skins/default/style.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/staffcarousel/style/ms-staff-style.css" rel="stylesheet" type="text/css"/>
<!-- Master Slider SCRIPTS -->
<script src="js/master-slider/masterslider.min.js"></script>
<style type="text/css">.ms-staff-carousel .ms-staff-info{min-height: 200px;}</style>
Staff Carousel Four
JULIA B. MCRAFLANE
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
AMY CLAYTON
PROGRAMMER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
FRED PENNER
WEB DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
MARTINA SAIZ
UI DESIGNER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JOSEPH B. SEWARD
DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JANE LOPEZ
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JAMES RIDGWAY
IT MANAGER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
PATRICIA BURNS
SYSTEM ADMIN
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
TERRY THOMPSON
REVIEWER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Staff Carousel Four
<div class="ms-staff-carousel ms-round">
<!-- masterslider -->
<div class="master-slider" id="masterslider4">
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/1.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>JULIA B. MCRAFLANE</h3>
<h4>COMPANY CEO</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/2.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>AMY CLAYTON</h3>
<h4>PROGRAMMER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/3.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>FRED PENNER</h3>
<h4>WEB DEVELOPER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<!-- end of masterslider -->
<div class="ms-staff-info" id="staff-info4"> </div>
</div>
$(document).ready(function() {
var slider = new MasterSlider();
slider.setup(
'masterslider4', {
loop: true,
width: 240,
height: 240,
speed: 20,
view: 'stffade',
preload: 0,
space: 0,
space: 45
});
slider.control('arrows', { autohide: false });
slider.control('slideinfo', { insertTo: '#staff-info4' });
});
<!-- add the following CSS and JS setting of Master Slider before </head> end tag -->
<!-- Master Slider CSS settings -->
<link href="js/master-slider/style/masterslider.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/skins/default/style.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/staffcarousel/style/ms-staff-style.css" rel="stylesheet" type="text/css"/>
<!-- Master Slider SCRIPTS -->
<script src="js/master-slider/masterslider.min.js"></script>
<style type="text/css">.ms-staff-carousel .ms-staff-info{min-height: 200px;}</style>
Staff Carousel Five
JULIA B. MCRAFLANE
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
AMY CLAYTON
PROGRAMMER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
FRED PENNER
WEB DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
MARTINA SAIZ
UI DESIGNER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JOSEPH B. SEWARD
DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JANE LOPEZ
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JAMES RIDGWAY
IT MANAGER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
PATRICIA BURNS
SYSTEM ADMIN
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
TERRY THOMPSON
REVIEWER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Staff Carousel Five
<div class="ms-staff-carousel">
<!-- masterslider -->
<div class="master-slider" id="masterslider5">
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/1.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>JULIA B. MCRAFLANE</h3>
<h4>COMPANY CEO</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/2.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>AMY CLAYTON</h3>
<h4>PROGRAMMER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/3.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>FRED PENNER</h3>
<h4>WEB DEVELOPER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<!-- end of masterslider -->
<div class="ms-staff-info" id="staff-info5"> </div>
</div>
$(document).ready(function() {
var slider = new MasterSlider();
slider.setup(
'masterslider5', {
loop: true,
width: 240,
height: 240,
speed: 20,
view: 'wave',
preload: 0,
space: 0,
wheel: true
});
slider.control('arrows');
slider.control('slideinfo', { insertTo: '#staff-info5' });
});
<!-- add the following CSS and JS setting of Master Slider before </head> end tag -->
<!-- Master Slider CSS settings -->
<link href="js/master-slider/style/masterslider.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/skins/default/style.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/staffcarousel/style/ms-staff-style.css" rel="stylesheet" type="text/css"/>
<!-- Master Slider SCRIPTS -->
<script src="js/master-slider/masterslider.min.js"></script>
<style type="text/css">.ms-staff-carousel .ms-staff-info{min-height: 200px;}</style>
Staff Carousel Six
JULIA B. MCRAFLANE
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
AMY CLAYTON
PROGRAMMER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
FRED PENNER
WEB DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
MARTINA SAIZ
UI DESIGNER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JOSEPH B. SEWARD
DEVELOPER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JANE LOPEZ
COMPANY CEO
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
JAMES RIDGWAY
IT MANAGER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
PATRICIA BURNS
SYSTEM ADMIN
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
TERRY THOMPSON
REVIEWER
E-Mail: [email protected]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Staff Carousel Six
<div class="ms-staff-carousel">
<!-- masterslider -->
<div class="master-slider" id="masterslider6">
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/1.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>JULIA B. MCRAFLANE</h3>
<h4>COMPANY CEO</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/2.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>AMY CLAYTON</h3>
<h4>PROGRAMMER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
<div class="ms-slide"> <img src="../masterslider/style/blank.gif" data-src="http://www.masterslider.com/features/templates/ms/staffcarousel/3.jpg" alt="lorem ipsum dolor sit" />
<div class="ms-info">
<h3>FRED PENNER</h3>
<h4>WEB DEVELOPER</h4>
<p class="email">E-Mail: <a href="#">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
<ul class="ms-socials">
<li class="ms-ico-fb"><a href="#">facebook</a></li>
<li class="ms-ico-tw"><a href="#">twitter</a></li>
<li class="ms-ico-gp"><a href="#">google+</a></li>
<li class="ms-ico-yt"><a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<!-- end of masterslider -->
<div class="ms-staff-info" id="staff-info6"> </div>
</div>
$(document).ready(function() {
var slider = new MasterSlider();
slider.setup(
'masterslider6', {
loop: true,
width: 240,
height: 240,
speed: 20,
view: 'flow',
preload: 0,
space: 0,
wheel: true
});
slider.control('arrows');
slider.control('slideinfo', { insertTo: '#staff-info6' });
});
<!-- add the following CSS and JS setting of Master Slider before </head> end tag -->
<!-- Master Slider CSS settings -->
<link href="js/master-slider/style/masterslider.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/skins/default/style.css" rel="stylesheet" type="text/css"/>
<link href="js/master-slider/staffcarousel/style/ms-staff-style.css" rel="stylesheet" type="text/css"/>
<!-- Master Slider SCRIPTS -->
<script src="js/master-slider/masterslider.min.js"></script>
<style type="text/css">.ms-staff-carousel .ms-staff-info{min-height: 200px;}</style>