Jak wykonać prosty slider jquery
Zaczniemy od pliku index.html do ktorego będziemy ładować nasz slider<html>Jak widać w powyższym pliku są ładowane pliki js : oraz jeden css
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Codaslider : JQuery Slider Plugin" />
<!--
dodaje css/
-->
<link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css">
<!-- stylizacja "wstępna" przykładowa -->
<style>
h1{
background-color:#000;
color:#F60;
text-align:center;
font-family:Tahoma, Geneva, sans-serif;
}
h2 {
background-color:#09F;
color:#FFF;
font-family:"Times New Roman", Times, serif;
text-align:center;
}
h3{
background-color:#000;
color:#FFF;
font-family:"Century Gothic";
size:12px;
text-align:center;
}
</style>
<!--
sugeruję użyć
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
-->
<!-- definiuje -->
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<!-- cała wersja -->
<script src="./js/jquery.coda-slider-3.0.min.js"></script>
<title>Slider by adam kleszewski</title>
<script>
$(function(){
$('#slider-id').codaSlider();
/* Można inczaej:
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});
*/
});
</script>
</head>
<body>
<h1 class="coda-slider">Prosty slider.WEB-kleszewski.Projektowanie stron internetowych</h1>
<div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Strona 1</h2>
<p><h1>WEB-kleszewski.Projektowanie stron internetowych.</h1><h3>Stopka strony 1</h3></p>
</div>
<div>
<h2 class="title">Strona 2</h2>
<p><h1>WEB-kleszewski.Projektowanie stron internetowych.</h1><h3>Stopka strony 2</h3> .</p>
</div>
<div>
<h2 class="title">Strona 3</h2>
<p><h1>WEB-kleszewski .Projektowanie stron internetowych.</h1> <h3>Stopka strony 3</h3></p>
</div>
<div>
<h2 class="title">Strona 4</h2>
<p><h1>WEB-kleszewski.Projektowanie stron internetowych</h1><h3>Stopka strony 4</h3></p>
</div>
</div>
</body>
</html>
- jquery-1.7.2.min.js
- jquery-ui-1.8.20.custom.min.js
- jquery.coda-slider-3.0.min.js
- coda-slider.css
Podam jeszcze ustawienia domyślne :javascript
- autoHeight: true,
- autoHeightEaseDuration: 1500,
- autoHeightEaseFunction: "easeInOutExpo",
- autoSlide: false,
- autoSliderDirection: 'right',
- autoSlideInterval: 7000,
- autoSlideControls: false,
- autoSlideStartText: 'Start',
- autoSlideStopText: 'Stop',
- autoSlideStopWhenClicked: true,
- continuous: true,
- dynamicArrows: true,
- dynamicArrowsGraphical: false,
- dynamicArrowLeftText: "« w lewo",
- dynamicArrowRightText: "w prawo»",
- dynamicTabs: true,
- dynamicTabsAlign: "center",
- dynamicTabsPosition: "top",
- firstPanelToLoad: 1,
- panelTitleSelector: "h2.title",
- slideEaseDuration: 1500,
- slideEaseFunction: "easeInOutExpo"
Brak komentarzy:
Prześlij komentarz