Я пытаюсь использовать слайдер что-нибудь из: http://theodin.co.uk/blog/development/advanced-jquery-slider.html
Теперь мне нужно создать несколько ползунков на моей странице, поэтому я переписал HTML как:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Slider</title>
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 5000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "", // Start text
stopText: "", // Stop text
navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
defaultThumb: 'images/kitchens/9.jpg' //set the default thumbnail if no other are found
});
$('#anythingSlider2').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 5000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "", // Start text
stopText: "", // Stop text
navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
defaultThumb: 'images/kitchens/9.jpg' //set the default thumbnail if no other are found
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li><!--slide 1-->
<div id="textSlide">
<img class="photo" src="images/kitchens/1.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 2-->
<div id="textSlide">
<img class="photo" src="images/kitchens/2.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 3-->
<div id="textSlide">
<img class="photo" src="images/kitchens/3.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 4-->
<div id="textSlide">
<img class="photo" src="images/kitchens/4.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 5-->
<div id="textSlide">
<img class="photo" src="images/kitchens/5.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 6-->
<div id="textSlide">
<img class="photo" src="images/kitchens/6.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 6</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 7-->
<div id="textSlide">
<img class="photo" src="images/kitchens/7.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 7</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 8-->
<div id="textSlide">
<h1>Kitchen Number 8</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
<div id="anythingSlider2">
<div class="wrapper">
<ul>
<li><!--slide 1-->
<div id="textSlide">
<img class="photo" src="images/kitchens/1.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 2-->
<div id="textSlide">
<img class="photo" src="images/kitchens/2.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 3-->
<div id="textSlide">
<img class="photo" src="images/kitchens/3.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 4-->
<div id="textSlide">
<img class="photo" src="images/kitchens/4.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 5-->
<div id="textSlide">
<img class="photo" src="images/kitchens/5.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 6-->
<div id="textSlide">
<img class="photo" src="images/kitchens/6.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 6</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 7-->
<div id="textSlide">
<img class="photo" src="images/kitchens/7.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 7</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 8-->
<div id="textSlide">
<h1>Kitchen Number 8</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
</div>
</body>
</html>
Но теперь второй слайдер, который должен появиться, отображается в виде стандартного списка ul / li. Есть идеи?
С другой стороны, возможно ли сбросить или удалить экземпляр какого-либо ползунка? в основном, я хочу, чтобы div вернулся в свое состояние, как было до добавления вызова функции слайдера ....