The jquery image slider works when i put it outside ng-view div. But doesn't work when i move it inside directives or when it is injected into ng-view
index.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/js/lightslider.js"></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
<body ng-controller="mainController">
<div class="wrapper">
<div id="main">
<!--code works when moved here-->
<div ng-view></div>
Html code for the slider, It doesnt work inside a directive.
slider.html
<div class="demo">
<div class="item">
<div class="clearfix" style="max-width:474px;">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
</ul>
</div>
</div>
</div>
Related
<html><head>
<title>J.T.C.</title>
<meta charset="utf-16">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/mainsd2B.css">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Scroll -->
<link href="https://fonts.googleapis.com/css?family=Heebo:460|Ramabhadra|Roboto" rel="stylesheet">
<!-- Adjust top of navbar -->
<script type="text/javascript">
var sw = document.getElementById('side-menu');
window.addEventListener('resize', function(event){
sw.style.width = '0px';
});
</script>
<script type="text/javascript">
var s = document.getElementById('side-menu');
function resizeFunction() {
s.style.display = 'none';
}
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
<script type="text/javascript">
// Reset Navbar top afer scroll
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
<script type="text/javascript">
//Control side-nav top position
$(function () {
$(document).scroll(function () {
var $nav1 = $(".side-nav-fixed-top");
$nav1.toggleClass('scrolled', $(this).scrollTop() > $nav1.height());
$nav1.visibility= "hidden";
});
});
</script>
<script type="text/javascript">
// Show Hide Navbar UL List
$(window).scroll(function(){
if($(document).scrollTop() > 200){//Here 200 may be not be exactly 200px
$('.side-nav').hide();
}
});
</script>
<style>
#media screen and (max-width: 927px) {
.navbar {
overflow: visible;
}
}
</style>
</head>
<body onresize="resizeFunction()" >
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="/assets/css/images/header46.jpg" alt=""></span>
</header>
<!-- Nav -->
<nav id="nav">
<div id="mainconm"><img src="/assets/css/images/mainltx.png" alt=""></div>
<ul>
<li>Home</li>
<li>Section One</li>
<li>Social
<ul>
<li>Section Two</li>
<li><a href="#third" class="" >Section Three</a></li>
</ul>
</li>
<li>Course
<ul>
<li>Section Four</li>
<li><a href="#fifth" class="" >Sections Five</a></li>
</ul>
</li>
</ul>
</li>
</nav>
<div id="sticky-anchor"></div>
<!-- class="navbar" -->
<nav class="navbar navbar-fixed-top" id="navigation" onscroll="navtotop()">
<span class="open-slide">
<button id="menu-box" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="3"></path>
<path d="M0,14 30,14" stroke="#000" stroke-width="3"></path>
<path d="M0,23 30,23" stroke="#000" stroke-width="3"></path>
</svg></button>
</span>
<div id="side-menu" class="side-nav side-nav-fixed-top bg-primary" style="display: none; width: 0px;">
<span class="open-slide">
<div style="height:70px; width: 100%; background:rgb(6, 13, 19, 1)" >
<button id="menu-box" style=" background: #000; border-radius: 0;" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0, 3 30,25" stroke="#fff" stroke-width="3"></path>
<path d="M0,25 60,-17" stroke="#fff" stroke-width="3"></path>
</svg>
</button>
</div>
</span>
Home
<a href="#first" class="slide" >Section One</a>
<a href="#second" class="slide" >Section Two</a>
<a href="#third" class="slide" >Section Three</a>
<a href="#forth" class="slide" >Section Four</a>
<a href="#fifth" class="slide" >Section Five</a>
<a href="#seventh" class="slide" >Section Six</a>
</div>
<div id="conm"><img src="assets/css/images/mainltx.png" alt=""></div>
</nav><div id="intro" style="position: absolute; z-index: 8000; top: 100px;"></div>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section class="main" style="padding-top: 20px !important;">
<div class="spotlight">
<div class="content">
<div id="largeicon" >
<span class="image"><img src="assets/css/images/homeimage.png" alt=""></span>
</div>
<div id="smallicon" class="alt">
<span class="logo"><img src="/assets/css/images/smallbanner.png" alt=""></span>
</div>
<header class="major">
<h3>Help us help you. Please take the surveys below.</h3>
</header>
<div style="float: clear;"></div>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
</header>
<div id="contact" class="sticky slide" >Contact Us</div>
<span class="image"><img style="width: 100%;" src="/assets/css/images/jb.png" alt=""></span>
<div id="coach" class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special apcol">
<header class="major">
<span class="image"><img style="width: 100%;" src="/assets/css/images/ps.png" alt=""></span>
<div class="center-list" style="margin-top: .05em;">
</div>
<footer class="major">
</footer>
</header></section>
<!-- Third Section -->
<section id="third" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/lt-icon.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Forth Section -->
<section id="forth" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/cting.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Fifth Section -->
<section id="fifth" class="main special inactive">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/vt.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
</div>
<!-- Footer -->
<div id="seventh" class="inactive"></div>
<footer id="footer">
<section>
</section>
<section>
<dl class="alt">
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
// Toggle close with button
var s = document.getElementById('side-menu');
function toggle_visibility() {
if(s.style.width == '0px')
s.style.width = '300px';
else
s.style.width = '0px';
}
</script>
<script type="text/javascript">
// Smooth Scroll
$(document).ready(function() {
$('.slide').click(function() {
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $(link).offset().top}, 2000);
return false;
});
});
// toggle close ul after select from list
document.getElementById('side-menu').style.display = 'none';
document.getElementById('side-menu').style.width = '0';
$(function() {
$("button").click(function() {
$("#side-menu").show();
});
$("#side-menu a").on('click', function(e) {
e.stopPropagation();
$("#side-menu")
.show()
/* .siblings() */
.val($(this).html());
});
});
</script>
</body></html>
My issue is that I have to click twice in order to get the mobile drop down menu for the website to either open or close. I believe that the JavaScript and HTML is sufficient. I have not been able to modify this JavaScript so that it works properly. Nothing I have tried works. Any suggestions? I have simplified this HTML to the essentials
You have very shared very little information. Possible reason can be that s.style.width is not 0px on initiation. Thats why the first click makes it 0px and the second click opens it. Try adding s.style.width='0px' at the start of the script.
I deleted the JavaScript (// toggle close ul after select from list) that is the at the bottom of the codes since it was clashing with the javascript (// Toggle close with button), which is also located near the bottom. I then used another JavaScript similar to the JavaScript found in (// Toggle close with button) to toggle close ul after a selection is selected from the list. This solved the double clicking issue.
My project has a sidebar that has four different options. (Schedule, progress, add course, drop course).
I want users to be able to click on these options (after expanding the side bar) and display the information from which ever of the four they clicked. I want this information to display on the same page, not link to another page.
I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes.
Note: I don't have any data for these 4 pages now - I just want to set it up so they function.
To keep it short: What code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked?
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
I am a beginner.
I have this code:
<a onclick="$('a[href=\'#tab-customtab\']').trigger('click');">Enquire Now</a>
<div id="tab-customtab"></div>
This opens up the div #tab-customtab but does not scroll to it. Is there a way to scroll to the div onclick?
something like this?
function scrollToId(aid){
var aTag = $("div[id='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
source: https://stackoverflow.com/a/8579673/4356678
Try this, it makes you more reliable and dynamic.
$(document).ready(function() {
$(".menu").on("click",function(event) {
if ($(".toggleMenu").hasClass('active')) {
$(".toggleMenu").click();
}
$('html,body').animate({
scrollTop: $(this.hash).offset().top}, 500);
});
$(".chosen-select").chosen();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav>
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
<li> Forth</li>
</ul>
</nav>
</header>
<section style="height:150px;width:100%;" id="div1">
<h2 style="text-center">First Div</h2>
</section>
<section style="height:150px;width:100%;" id="div2">
<h2 style="text-center">Second Div</h2>
</section>
<section style="height:150px;width:100%;" id="div3">
<h2 style="text-center">Third Div</h2>
</section>
<section style="height:150px;width:100%;" id="div4">
<h2 style="text-center">Forth Div</h2>
</section>
I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.
$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.
I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.
Hi I am using a javascript to get tabs functionality for buttons. In each tab I want to show a slider for which I am showing anything slider. The issue I am facing is the slider content is not showing in the 2nd and 3rd tabs.There is no issue with tabs functionality.tabs function working fine.I can able to switch from one tab to other.Could anyone help me.
Here is the script I am using for tabs functionality
<script type="text/javascript">
$(document).ready(function () {
var tabContainers = $('div.spec-nav > div');
tabContainers.hide().filter(':first').show();
$('div.spec-nav ul li a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.spec-nav ul li a').removeClass('spec-actv');
$(this).addClass('spec-actv');
return false;
}).filter(':first').click();
});
</script>
HTML code for tabs and slider
<div class="spec-nav">
<ul class="serv-nav">
<li id="p1">Tab1</li>
<li id="p2">Tab2</li>
<li id="p3">Tab3</li>
</ul>
<div id="first" class="anythingSlider-theme2" style="display:block;float:left;">
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #1 -->
</div><!--first-->
<div id="second" class="anythingSlider-theme3" style="display:none;float:left;">
<ul id="slider2">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #2 -->
</div><!--second-->
<div id="third" class="anythingSlider-theme4" style="display:none;float:left;">
<ul id="slider3">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #3 -->
</div><!--third-->
</div><!--spec-nav-->
Intializtion code of anthing slider
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
$(document).ready(function(){
$(function(){
$('#slider1').anythingSlider({
theme : 'metallic',
easing : 'easeInOutBack',
navigationFormatter : function(index, panel){
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});
});
Is there a slider in the second and third tabs?
I used your code to put together this demo and it all seems to work for me.
Also, you don't need to wrap the code in two document ready functions, just one is enough:
$(function () { // same as $(document).ready(function(){
$('#slider1').anythingSlider({
theme: 'metallic',
easing: 'easeInOutBack',
navigationFormatter: function (index, panel) {
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete: function (slider) {
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});