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:

bx_loader controls

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 🙂

sl1

Podobne wpisy

Audyt SEO – co to jest, rodzaje i cele

Audyt SEO – co to jest, rodzaje i cele

Wyszukiwarka Google wymaga, aby strony były przyjazne nie tylko dla użytkowników, ale też i robotów. Z tego powodu ważne jest dostosowywanie strony do algorytmów tej wyszukiwarki oraz przystosowanie jej do obowiązujących trendów użyteczności. W tym celu opracowuje się audyty seo, które zawierają uwagi, wytyczne i porady dotyczące analizowanych stron, sklepów…

Masowa kompresja zdjęć w WordPress jednym kliknięciem

Masowa kompresja zdjęć w WordPress jednym kliknięciem

Używałam kilka wtyczek do cmsa WordPress, które zoptymalizują i skompresują mi wszelkie obrazki na stronie. Lecz nie były one wystarczające, zaledwie leciutko kompresowały i nie było można odczuć efektów, jakim jest przyspieszona strona www. Kompresja i optymalizacja zdjęć Jednym z popularnych wtyczek do optymalizacji grafik są: Smush, EWWW Image Optimizer,…

Jak łatwo i szybko samemu wykonać stronę internetową na WordPressie

Jak łatwo i szybko samemu wykonać stronę internetową na WordPressie

Dziś zdradzę Wam mój największy sekret jak tworzyć strony 😀 Stracę przez to pracę, ale cóż. No dobra, może jednak nie do końca 🙂 Dla osób które nigdy nie używały WordPressa, nie pisały stylów css, nie wgrywały wtyczek i nie konfigurowały WP, to może być na początku trochę kłopotliwe. Ale…

Responsywna mapa google na stronę

Responsywna mapa google na stronę

Dziś wstawimy mapę google na stronę, do tego responsywną, będzie skalowała się pod wszelkie rozdzielczości. Taka mapka przydaje się gdy chcemy klientom pokazać gdzie znajduje się siedziba naszej firmy, sklepu, by mogli szybko znaleźć i dojechać. Można ją powiększać, pomniejszać, przesuwać. Wstawimy na całą szerokość strony.

Nauka programowania przez internet

Nauka programowania przez internet

Postęp technologiczny dotyka niemalże wszystkich aspektów naszego życia w coraz większym stopniu. Wpływa na nasze możliwości komunikacyjne, redukując do zera opóźnienie w wymianie komunikatów z drugą osobą, nawet jeśli owa osoba oddalona jest o kilka tysięcy kilometrów. Umożliwia nam zrelaksowanie się przy nieszczególnie zobowiązujących, lekkich treściach, ale daje nam również…

WAF – Web Application Firewall – ochrona strony

WAF – Web Application Firewall – ochrona strony

Hosting hekko.pl uruchomił świetne narzędzie do ochrony naszych stron www. Wystarczy jedno kliknięcie w panelu serwera i możemy spać spokojnie, wiedząc, że system sam zadba o bezpieczeństwo stron. WAF Jest to rozwiązanie poprawiające bezpieczeństwo stron, które obniża ryzyko ataków na stronę takich jak: spamowanie przez formularze, xss, brute force. Dzięki…

Subscribe
Powiadom o
guest

0 komentarzy
Inline Feedbacks
View all comments