Slider zdjęć w jQuery
Przez upały nic nie idzie robić, dopiero wieczorem jest ciut chłodniej by zabrać się za pisanie, a i mecze sporo czasu zajmują 😀 Nasi awansowali dalej, a mecz do najkrótszych nie należał, przysporzył nam sporo nerwów, ale wywalczyli i wielkie brawa! 🙂
Zaczynamy. Wykonam tutorial pt. jak wykonać animowany slider zmieniających się zdjęć.
Strona składa się z plików:
index.html
style.css
bxslider.css (plik ze stylami slidera)
Folderów:
foto (folder ze zdjęciami do slidera)
images (elementy graficzne slidera)
script (bxslider.js, jquery.bxslider.js)
W kodzie w index.html w head wstawiamy kod galerii:
<link rel="stylesheet" type="text/css" href="bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="script/jquery.bxslider.js"></script>
Czyli plik css ze stylami slidera, standardowo plik jQuery i plik ze skryptem js slidera.
Do folderu foto wrzucamy zdjęcia do slidera.
W body, w miejsce gdzie ma być slider dajemy kod:
<div id="slider"> <ul class="bxslider"> <li><a href="a" target="_parent"><img src="foto/slider.jpg" alt="photo" /></a></li> <li><a href="a" target="_parent"><img src="foto/slider2.jpg" alt="photo" /></a></li> <li><a href="a" target="_parent"><img src="foto/slider3.jpg" alt="photo" /></a></li> </ul> </div>
Linijka
<li><a href="a" target="_parent"><img src="foto/slider.jpg" alt="photo" /></a></li>
odpowiada za zdjęcie w sliderze.
Na dole kodu przed zamknięciem body dodajemy linijkę:
<script src="script/bxslider.js"></script>
Cały kod html wygląda tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="index, follow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="www.tworzenie-stronek.pl" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="bxslider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="script/jquery.bxslider.js"></script>
</head>
<body>
<div id="wrapper">
<div class="page">
<div id="top">
<div id="slider">
<ul class="bxslider">
<li><a href="a" target="_parent"><img src="foto/slider.jpg" alt="photo" /></a></li>
<li><a href="a" target="_parent"><img src="foto/slider2.jpg" alt="photo" /></a></li>
<li><a href="a" target="_parent"><img src="foto/slider3.jpg" alt="photo" /></a></li>
</ul>
</div>
</div>
</div>
<div id="clear"></div>
<div id="footer">
stopka
</div>
</div>
<script src="script/bxslider.js"></script>
</body>
</html>
Cały kod css wygląda tak:
* { padding: 0; margin: 0; }
html, body {
font-family: Tahoma, sans-serif;
font-weight: 300;
width: 100%;
height: 100%;
font-size: 15px;
color: #000000;
margin: 0 auto;
background-color: #FFFFFF;
}
a {outline: none; text-decoration: none; color: #000000;}
a:hover {text-decoration: underline; color: #000000;}
#wrapper {
margin: 0 auto -150px;
min-height: 100%;
position: relative;
}
#clear{
clear: both;
height: 150px;
}
.page {
margin: 0 auto;
}
#top{
float: left;
width: 100%;
padding-top: 5%;
position: relative;
}
#slider{
float: left;
width: 100%;
text-align: center;
}
#slider img{
margin: 0 auto;
}
#footer {
float: left;
width: 100%;
height: 130px;
padding-top: 20px;
bottom: 0px;
position: absolute;
text-align: center;
font-size: 13px;
background-color: #EEEEEE;
}
#footer a{
text-decoration: underline;
}
img
{
border: 0px;
}
@media (min-width: 1581px) {
#wrapper{width:100%;}
.page{width:1180px;}
}
@media (min-width: 551px) and (max-width: 1200px){
.bxslider img {
max-width: 90%!important;
padding: 0.8%;
}
.bx-wrapper .bx-prev {
left: 70px!important;
}
.bx-wrapper .bx-next {
right: 70px!important;
}
}
@media (max-width: 550px) {
.bxslider img {
max-width: 90%!important;
padding: 0.8%;
}
.bx-wrapper .bx-prev {
left: 40px!important;
}
.bx-wrapper .bx-next {
right: 40px!important;
}
}
Dodałam style warunkowe do responsywności jak maxymalna szerokość slidera na smartfonach, tabletach:
@media (max-width: 550px) {
.bxslider img {
max-width: 90%!important;
padding: 0.8%;
}
.bx-wrapper .bx-prev {
left: 40px!important;
}
.bx-wrapper .bx-next {
right: 40px!important;
}
}
Zawartość pliku bxslider.css:
/**
* bxSlider v4.2.5
* Copyright 2013-2015 Steven Wanderski
* Written while drinking Belgian ales and listening to jazz
* Licensed under MIT (http://opensource.org/licenses/MIT)
*/
/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 0px;
padding: 0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.bx-wrapper img {
max-width: 100%;
display: block;
transition-duration: 0.2s;
transition-timing-function: linear;
}
.bxslider img {
max-width: 98%;
padding: 0.8%;
background-color: #eeeeee;
}
.bx-wrapper img:hover {
opacity: 0.8;
}
.bxslider img:hover {
opacity: 1;
}
.bxslider {
margin: 0;
padding: 0;
}
ul.bxslider {
list-style: none;
}
.bx-viewport {
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url('images/bx_loader.gif') center center no-repeat #ffffff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #39547d;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #4d71a8;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager-item {
font-size: 0;
line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: -45px;
background: url('images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
background-position: 0 0;
}
.bx-wrapper .bx-next {
right: -45px;
background: url('images/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url('images/controls.png') -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url('images/controls.png') -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
W folderze images są 2 pliki graficzne:
W folderze script, plik bxslider.js:
$('.bxslider').bxSlider({
mode: 'fade',
slideWidth: 1100,
pager: false,
auto: true,
pause: 5000
});
Te powyższe to parametry slidera, które możemy zmienić według uznania, mode fade to zanikanie zdjęć, według mnie najciekawsze i najczęściej stosowane. Auto – true – czyli slier uruchamia sie sam automatycznie i zaczyna zmieniać zdjęcia. Pause to czas przejścia między zdjęciami, czyli prędkość zmieniania zdjęć.
Plik w folderze script – jquery.bxlider.js wstawiam na bloga do pobrania, gdyż jest trochę długi. Można pobrać tutaj: jquery.bxslider
Gotowe 🙂
