Joseph Astrahan
Reputation: 9072
Jquery Slider Not Sliding Automatically
On my site, http://operationwebdesign.com/index.php, I have a jquery slider as the main item you see. It works if you click the buttons to switch slides but for some reason the code to automate it going is not working. Does anyone know what might be wrong?
For reference here is the code to the site currently.
Header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operation Web Design - Quality</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/favicon.ico" >
<link type="text/css" href="css/styles-protfolio.css" rel="stylesheet" media="all" />
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="fontkit/stylesheet.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="slider/css/layout.css" />
<link rel="stylesheet" type="text/css" href="slider/css/style4.css" />
<!--Slider -->
<script language="javascript" type="text/javascript" src="slider/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="slider/js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="slider/js/script.js"></script>
<script type="text/javascript">
$(document).ready( function(){
// buttons for next and previous item
var buttons = { previous:$('#jslidernews1 .button-previous') ,
next:$('#jslidernews1 .button-next') };
$obj = $('#jslidernews1').lofJSidernews( { interval : 4000,
easing : 'easeInOutQuad',
duration : 1200,
auto : false,
maxItemDisplay : 3,
startItem :0,
navPosition : 'horizontal', // horizontal
navigatorHeight : null,
navigatorWidth : null,
mainWidth:960,
buttons:buttons} );
});
</script>
<!--Slider -->
<script type="text/javascript" src="js/jqueryd.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/ui_002.js"></script>
<script type="text/javascript" src="js/work.js"></script>
<!--portfolio New-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/po-new/jquery.quicksand.js" type="text/javascript"></script>
<!-- -->
<script src="js/po-new/jquery.easing.js" type="text/javascript"></script>
<script src="js/po-new/script.js" type="text/javascript"></script>
<!--- -->
<script src="js/po-new/jquery.prettyPhoto.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<!--div class="prodSale">
<a href="templates.html"><span>Products for Sale</span></a>
</div-->
<div class="main-coll">
<!--Header -->
<header>
<div class="cent-coll">
<div class="head-post">
<div class="svipl-logo">
<h1 class="logo"><a href="index.php" title="Operation Web Design"><img src="images/logo.png" alt="Operation Web Design"></a></h1>
</div>
<nav class="topnav">
<ul class="nav">
<li><a href="index.php" class="current">HOME<span>OUR MAIN PAGE</span></a></li>
<li><a href="portfolio.php">PORTFOLIO<span>OUR WORK</span></a></li>
<li><a href="about.php">ABOUT US<span>WHO WE ARE</span></a></li>
<li><a href="services.php">SERVICES<span>WHAT WE OFFER</span></a></li>
<li><a href="contact.php">CONTACT US<span>DROP US A LINE</span></a></li>
</ul>
</nav>
<div class="social">
<a href="#" class="fbook">Facebook</a>
<a href="#" class="twitter">Twitter</a>
<a href="#" class="linkin">LinkedIn</a>
<a href="#" class="blog">Blog</a>
</div>
</div>
</div>
</header>
<!--Header -->
index.php
<?php
require('header.php');
?>
<!--Slider -->
<div class="info-head">
<div class="info-bg">
<div class="cent-coll">
<div class="intro-mn">
<div id="jslidernews1" class="lof-slidecontent" style="width:960px; height:315px;">
<div class="preload"><div></div></div>
<!--
<div class="button-previous">Previous</div>
<div class="button-next">Next</div>
-->
<!-- MAIN CONTENT -->
<div class="main-slider-content" style="width:960px; height:340px;">
<ul class="sliders-wrap-inner">
<li>
<img src="images/slide1-img.png" title="Newsflash 1" />
<div class="slide-dtl">
<h2>HELLO & WELCOME</h2>
<p>Need a website? Need help with internet marketing?<br>
We specialize in creating quality websites and effective<br>
internet Marketing for every business.
</p>
<div class="btn-coll">
<a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
<a href="contact.php" class="contoday">Contact us Today!</a>
</div>
</div>
</li>
<li>
<img src="images/html5-css3.png" title="Newsflash 2" />
<div class="slide-dtl">
<h2>HTML5 & CSS3</h2>
<p>All of our sites are HTML 5 and CSS 3 Compliant.<br/>
This ensures our sites work on all the popular browsers: <br/>
Mozilla Firefox, Internet Explorer, Safari, Google Chrome!
</p>
<div class="btn-coll">
<a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
</div>
</div>
</li>
<li>
<img src="images/mobile-app.png" title="Newsflash 3" />
<div class="slide-dtl">
<h2>MOBILE APPS & WEB</h2>
<p>Need a mobile app for your website or business?<br>
We can make it for you. Android® or iPhone® Platforms.<br>
We can make mobile friendly versions of your site too!
</p>
<div class="btn-coll">
<a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
</div>
</div>
</li>
<li>
<img src="images/seo-img.png" title="Newsflash 4" />
<div class="slide-dtl">
<h2>SEO</h2>
<p>Need more traffic for your website?<br>
We can get you to the top of the Search Engines<br>
Google, Yahoo, Bing, you name it!
</p>
<div class="btn-coll">
<a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
</div>
</div>
</li>
<li>
<img src="images/web-design-dev.png" title="Newsflash 5" />
<div class="slide-dtl">
<h2>WEB DESIGN</h2>
<p>Need a productive website for your business?<br>
Want a design that brings you more clients?<br>
We design to deliver you results!
</p>
<div class="btn-coll">
<a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
</div>
</div>
</li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="navigator-content">
<!--<div class="button-control"><span></span></div> -->
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
</div>
<!----------------- END OF NAVIGATOR --------------------->
</div>
</div>
</div>
</div>
</div>
<!--Slider -->
<!--Content Part -->
<div class="main-coll">
<div class="cent-coll">
<section class="page-coll">
<h3 class="wlcm-txt">
<span>Operation Web Design</span> helps busy entrepreneurs save time by getting customers so they can focus on making money in their business. How do we do this?<br/><br/> Check out our <a href="portfolio.php">work</a> or <a href="contact.php">drop us a line</a>.
</h3>
<div class="latest-work">
<article class="work-first">
<h2 class="section-title whi">OUR LATEST CLIENT</h2>
<p>Team Crowd Fund specializes in helping its clients raise money they need for their business/idea through crowd funding platforms, like Kickstarter or Indiegogo.</p>
<a href="http://teamcrowdfund.com" class="more blackgred" target="_blank"><span>Visit Page</span></a>
</article>
<ul style="" id="all" class="workThumbs ui-tabs-panel ui-widget-content ui-corner-bottom">
<div style="text-align:left;padding-left:25px;"><b>Other Clients:</b></div>
<li>
<a href="#"><img style="opacity: 1;" src="images/pro-img/thumb.jpg" alt="XXXLutx"></a>
<h4>Clickr</h4>
<p>Create Your Pictures Album</p>
</li>
<li>
<a href="#"><img style="opacity: 1;" src="images/pro-img/thumb9.jpg" alt="Saybets"></a>
<h4>Pernel Berkeley</h4>
<p>A Creative Artist</p>
</li>
<li>
<a href="#"><img style="opacity: 1;" src="images/pro-img/thumb19.jpg" alt="Maxxo"></a>
<h4>Logo Producers</h4>
<p>Social networking</p>
</li>
</ul>
</div>
</section>
</div>
<div class="services_bg">
<div class="cent-coll">
<section class="page-coll">
<aside class="box3_main">
<h2 class="section-title">SERVICES</h2>
<div class="main-coll">
<article class="services-cell">
<div class="services-img">
<img src="images/webdesign-icon.png" alt="" />
</div>
<div class="services-detail">
<h3>Web Design & Development</h3>
<p>Web Design & Development is the most important aspect to an online campaign. We create beautiful <strong>website designs</strong> that engages customers and grows businesses.</p>
<a href="#" class="readmore">Learn More →</a>
</div>
</article>
<article class="services-cell mL20">
<div class="services-img">
<img src="images/ecommerce-icon.png" alt="" />
</div>
<div class="services-detail">
<h3>eCommerce Websites</h3>
<p>Want to sell your products online? Our <strong>eCommerce websites</strong> are crafted to meet your business requirements. Sell anything and everything, no limits just your imagination.</p>
<a href="#" class="readmore">Learn More →</a>
</div>
</article>
<article class="services-cell mL20">
<div class="services-img">
<img src="images/mobile-application-icon.png" alt="" />
</div>
<div class="services-detail">
<h3>Mobile Websites</h3>
<p>Customers are in a rush to find your business and mobile devices provide the answer. We create sites that work on all the mobile devices such as Android® & iPhone®.</p>
<a href="#" class="readmore">Learn More →</a>
</div>
</article>
</div>
</aside>
<ul class="technologies">
<li><img src="images/symphony-logo.png" alt="" /></li>
<li><img src="images/php-logo.png" alt="" /></li>
<li><img src="images/mysql-logo.png" alt="" /></li>
<li><img src="images/jquery-logo.png" alt="" /></li>
<li><img src="images/java-logo.png" alt="" /></li>
<li><img src="images/xml-logo.png" alt="" /></li>
<li><img src="images/androiod-logo.png" alt="" /></li>
<li><img src="images/wordpress-logo.png" alt="" /></li>
</ul>
</section>
</div>
<div class="crossline1"></div>
</div>
<div class="cent-coll">
<section class="page-coll">
<article class="main-coll">
<h2 class="about-head"><span>ABOUT </span> Operation Web Design</h2>
<p class="about-dtl">Operation Web Design specializes in the business of providing Software Outsourcing & Offshore Software Development services to its clients globally. Our solid technical expertise, profound knowledge of latest industry trends, Customer needs and quality-driven delivery model offer progressive end-to-end web solutions.</p>
<p class="about-dtl">Our services include: Professional Web Design, SEO, ECommerce Solution, Web Application Development & Maintaining, Web-Hosting, Logo Design & Flash Websites.</p>
<div class="btn-cell">
<a href="#" class="lmore blackgred"><span>Learn More</span></a>
</div>
</article>
</section>
</div>
</div>
</div>
<!--Content Part -->
<?php
require('footer.php');
?>
Any help is GREATLY appreciated, I'm at a loss for why it's not working.
Upvotes: 0
Views: 849
Answers (1)
Kitsu
Reputation: 64
Have you tried changing this part
instead of false change auto to TRUE
$obj = $('#jslidernews1').lofJSidernews ({ interval : 4000,
easing : 'easeInOutQuad',
duration : 1200,
auto : true
});
Upvotes: 1
Related Questions
- Slider doesn't work as expected (JQuery, JavaScript)
- Slider not moving automatically
- slider won't work properly
- jQuery Slider is not working properly
- jQuery slider UI not sliding
- jQuery slider not sliding
- jQuery slider not behaving as expected
- BAsic jquery slider not working
- jQuery slider - unexpected behaviour
- JQuery Sliding doesn't seem to work