Very Simple Slider

Very Simple Slider

HTML Code :
———————————–
<section class=”demo”>
<button class=”next”>Next</button>
<button class=”prev”>Previous</button>

 <section class=”container”>
<section style=”display: inline-block;”>Slider Images</section>
<section>Slider Images</section>
<section>Slider Images</section>
<section>Slider Images</section>
<section>Slider Images</section>
</section>

CSS :
———————————–
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}

button {
position: absolute;
}

.next {
right: 5px;
}

.prev {
left: 5px;
}

Jquery :
———————————–

var currentIndex = 0,
items = $(‘.container section’),
itemAmt = items.length;

<!– display current slider –>
function cycleItems() {
var item = $(‘.container section’).eq(currentIndex);
items.hide();
//item.css(‘display’,’inline-block’);
item.fadeIn();
}

<!– Auto Slide –>
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt – 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);

<!– Next Button –>
$(‘.next’).click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt – 1) {
currentIndex = 0;
}
cycleItems();
});

<!– Prev Button –>
$(‘.prev’).click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt – 1;
}
cycleItems();

 

Advertisements
Nav with Arrow

Nav with Arrow

HTML
———————-
<ul class=”nav”>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
<li><a href=”#”>Item 6</a></li>
<li><a href=”#”>Item 7</a></li>
<li><a href=”#”>Item 8</a></li>
<li><a href=”#”>Item 9</a></li>
<li><a href=”#”>Item 10</a></li>
</ul>

CSS
———————-
ul.nav{
float:left;
position:relative;
height:40px;
}

ul.nav li{
line-height:40px;
float:left;
list-style-type:none;
}
ul.nav li a{
display:block;
background:#000;
color:#fff;
text-decoration:none;
padding:0 10px;
}

ul.nav li a:hover{
background:#ccc;
}
ul.nav li#more a{
color:red;
}

.moreLi{
position:absolute;
right:0;
top:40px;
width:200px;
display:none;
}

.moreLi li{
float:none!important;
}

ul.nav li#more .moreLi li a{
color:#fff;
}

JQUERY
———————-

$(window).load(function() {
if ($(‘.nav > li’).length > 6) {
$(‘.nav’).append(‘<li id=”more”><a href=”#”>more<ul class=”moreLi”></ul></li>’);
$(‘.nav li:gt(5):not(#more)’).appendTo(‘#more ul’);
}

$(“#more”).hover(function(){
$(“.moreLi”).slideDown();
});
$(“#more”).mouseleave(function(){
$(“.moreLi”).hide();
});

});

Jquery Dropdown

Jquery Dropdown

Create Drop-down menu, Mega menu, Slider-menu from same jquery and CSS.

$(window).load(function(){
// For language DropDown
$(“.language li”).click(function(){
$(this).children(“ul.languageList”) .slideDown(500);
$(this).addClass(“active”);
return false;
});

$(“.language li”).mouseleave(function(){
$(this).children(“ul.languageList”) .slideUp(100);
$(this).removeClass(“active”)
});

//Top menu dropdown
if($(window).width() > 730) {

$(“.topNav li”).hover(function(){
$(this).children(“.topNavDrop”) .slideDown(500);
$(this).addClass(“active”);
return false;
});

$(“.topNav li”).mouseleave(function(){
$(this).children(“.topNavDrop”) .slideUp(100);
$(this).removeClass(“active”)
});

//Top menu dropdown Level2
$(“.topNav li”).hover(function(){
$(this).children(“.topNavDropSub”) .show();
$(this).addClass(“active”);
return false;
});

$(“.topNav li”).mouseleave(function(){
$(this).children(“.topNavDropSub”) .hide();
$(this).removeClass(“active”)
});

} else {
$(“.topNav li”).click(function(){
$(this).children(“.topNavDrop”) .slideDown(500);
$(this).addClass(“active”);
return false;
});

$(“.topNav li”).mouseleave(function(){
$(this).children(“.topNavDrop”) .slideUp(100);
$(this).removeClass(“active”)
});

//Top menu dropdown Level2
$(“.topNav li”).click(function(){
$(“.topNav li”).removeClass(“active”);
$(“.topNavDropSub”).hide();
$(this).children(“.topNavDropSub”) .show();
$(this).addClass(“active”);
return false;
});

}

//slide left menu

$(“.slideMenu li”).click(function(){
$(this).children(“ul.subMenu”) .show();
$(this).addClass(“active”);
return false;
});

$(“.slideMenu li”).mouseleave(function(){
$(this).children(“ul.subMenu”) .hide();
$(this).removeClass(“active”)
});

// For Sitenav DropDown

if($(window).width() > 770) {
var docH = $(document).height();
docH = docH-126;

$(“.siteDropNav”).css(“height”, docH);

$(“.siteNav ul li”).click(function(){
$(this).children(“.siteDropNav”) .slideDown(500);
$(this).addClass(“active”);
return false;
});

$(“.siteNav ul li”).mouseleave(function(){
$(this).children(“.siteDropNav”) .slideUp();
$(this).removeClass(“active”);
});
} else {
$(“.siteNav ul li”).click(function(){
$(“.siteNav ul li”).removeClass(“active”);
$(“.siteDropNav”).hide();
$(this).children(“.siteDropNav”) .slideDown(500);
$(this).addClass(“active”);
return false;
});
}

$(“.bxslider”).bxSlider({
auto: true
});

// mobile nav
$(“.topMobIcon”).click(function(){
$(“.topNav”).slideDown();
});

$(“.siteMobIcon”).click(function(){
$(“.siteNav”).slideDown();
});

$(“.closeNav”).click(function(){
$(this).parent(“.mobNav”).hide();
});

}); // window load end

Download File

Play and stop Youtube video in you page

Play and stop Youtube video in you page

var playVideo = function(player) {
var videoURL = player.prop(‘src’);
videoURL += “&autoplay=1”;
player.prop(‘src’,videoURL);
}

var stopVideo = function(player) {
var vidSrc = player.prop(‘src’);
vidSrc = vidSrc.replace(“&autoplay=1”, “”);
player.prop(‘src’, ”); // to force it to pause
player.prop(‘src’, vidSrc);
};

// Call the functions

$(‘.play-video’).click(function(e){
playVideo($(‘#video’));
});

$(‘.close-video’).click(function(e){
stopVideo($(‘#video’));
});