Caroysel slideshow with buttons

Το carousel slideshow έχει την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε οριζόντια διάταξη οι οποίες όταν θα κλικάρονται ανοίγουν στο link που τις έχετε συνδέσει.

Διαθέτει επίσης και κουμπιά πλοήγησης. Το πλάτος του slideshow αφήστε το ως έχει width:100%; Το ύψος των εικόνων ρυθμίστε το αλλάζοντας το max-height:150px; Το πλάτος των εικόνων το ρυθμίζετε αλλάζοντας το itemWidth: 238, αλλά θα πρέπει να λάβετε υπ’ όψιν σας πόσες εικόνες θέλετε να περιέχει το slideshow στην κάθε διαφάνεια το οποίο εξαρτάται από το πόσο πλάτος έχετε στη διάθεσή σας.

Αν έχετε πλάτος ανάρτησης π.χ. 600px μπορείτε να επιλέξετε πλάτος εικόνων 200px και ανάλογο ύψος, αλλά αυτό για 3 εικόνες που θα επιλέξετε να εμφανίζονται σε κάθε διαφάνεια του slideshow το οποίο το ρυθμίζετε 3 γραμμές παρακάτω από το itemWidth: 238, εκεί που γράφει maxItems: 4}. Αν έχετε παραπάνω πλάτος 800px π.χ. τότε μπορείτε να επιλέξετε να εμφανίζονται 4 εικόνες με 200px πλάτος ή 3 εικόνες με 266px πλάτος και φυσικά το ανάλογο ύψος για να μην υπάρχει παραμόρφωση. Δείτε πως θα φαίνεται το slideshow στην αρχή του υποσέλιδου στο demo blog μου εδώ.

/* Browser Resets */

.flex-container a:active,

.flexslider a:active,

.flex-container a:focus,

.flexslider a:focus{

outline:none;}

.slides,

.flex-control-nav,

.flex-direction-nav{

margin:0;

padding:0;

list-style:none;}

/* FlexSlider Necessary Styles */

.flexslider{

margin:0;

padding:0;}

.flexslider .slides > li{

display:none;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

-o-backface-visibility:hidden;

backface-visibility:hidden;}

/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img{

width:100%;

display:block;}

.flex-pauseplay span{text-transform:capitalize;}

/* Clearfix for the .slides element */

.flexslider a.intro {

bottom:0;

color:rgba(0, 0, 0, 0.1);

font-size:14px;

position:absolute;

right:0;

text-decoration:none;

z-index:99999;}

.slides:after{

content:".";

display:block;

clear:both;

visibility:hidden;

line-height:0;

height:0;}

html[xmlns] .slides{display:block;}

* html .slides{height:1%;}

/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you

* include js that eliminates this class on page load */

.no-js .slides > li:first-child{

display:block;}

/* FlexSlider Default Theme */

.flexslider{

margin:0 0 5px;

background:#115595;

border:1px solid #4EFF44;

position:relative;

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

zoom:1;}

.flex-viewport{

max-height:150px;

-webkit-transition:all 1s ease;

-moz-transition:all 1s ease;

-o-transition:all 1s ease;

transition:all 1s ease;}

.loading .flex-viewport{max-height:150px;}

.flexslider .slides{zoom:1;}

.carousel li{margin-right:5px;}

/* Direction Nav */

.flexslider li {

border: 0 none !important;

padding: 0 !important;

text-indent: 0 !important;}

.flex-direction-nav a{

width:30px;

height:30px;

margin:-20px 0 0;

display:block;

background:url(https://lh3.googleusercontent.com/-OlOKI59Y5qY/VSTy-zOTzqI/AAAAAAAAQr8/Q2YtZ8TQsIw/w57-h27-no/direction-nav.png) no-repeat 0 0;

position:absolute;

top:50%;

cursor:pointer;

text-indent:-9999px;

opacity:0;

-webkit-transition:all .3s ease;

-moz-transition:all .3s ease;

-o-transition:all .3s ease;

transition:all .3s ease;}

.flex-direction-nav .flex-next{background-position:100% 0; right:-36px;}

.flex-direction-nav .flex-prev{left:-36px;}

.flexslider:hover .flex-next{opacity:0.8; right:5px;}

.flexslider:hover .flex-prev{opacity:0.8; left:5px;}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1;}

.flex-direction-nav .disabled{

opacity: .3!important;

filter:alpha(opacity=30);

cursor:default;}

/* Control Nav */

.flex-control-nav{

width:100%;

position:absolute;

bottom:5px;

text-align:center;}

.flex-control-nav li{

margin:0px;

display:inline-block;

zoom:1;

*display:inline;}

.flex-control-paging li a{

width:11px;

height:11px;

display:block;

background:#FF1111;

background:rgba(255,255,0);

cursor:pointer;

text-indent:-9999px;

-webkit-border-radius:20px;

-moz-border-radius:20px;

border-radius:20px;}

.flex-control-paging li a:hover{

background:# FF1111;

background:rgba(255,255,0);}

.flex-control-paging li a.flex-active{

background:#4EFF44;

background:rgba(255,255,0);

cursor:default;}

.flex-control-thumbs{

margin:5px 0 0;

position:static;

overflow:hidden;}

.flex-control-thumbs li{

width:50%;

float:left;

margin:0;}

.flex-control-thumbs img{

width:100%;

display:block;

opacity:.7;

cursor:pointer;}

.flex-control-thumbs img:hover{opacity:1;}

.flex-control-thumbs .active{opacity:1; cursor:default;}

</style>

$(document).ready(function(){

$(window).load(function() {

$('.flexslider').flexslider({

animation: "slide",

animationLoop: true,

itemWidth: 238,

itemMargin: 0,

minItems: 1,

maxItems: 4});});});

</script>

<br />

πηγη

Caroysel slideshow with buttons

Δημοσίευση σχολίου

Social Plugin

Popular Posts

Βραβεία καινοτομίας για τρία προϊόντα Logitech

Πως συνδέω το domain μου με το blog μου HOT

Διαθέσιμες στην Ευρώπη οι πρώτες στον κόσμο Smart TVs με Firefox OS από την Panasonic

Project Maelstrom: Ο torrent-based browser του BitTorrent διαθέσιμος σε beta έκδοση

Labels

Games

Comments

Made with Love by

Product Services

Best Services

Footer Copyright

buttons=(Accept !) days=(20)

Contact form