Carousel slider je variantou slideru, kdy se zobrazuje více než jeden obrázek a pouze se posouvají do stran. Často se s nimi můžete setkat na firemních stránkách, kde se posunují loga spolupracujících firem. Ve video návodu vám ukáži, jak vytvořit podobný carousel pomocí shortcodu.
Videa jsou tentokrát dvě, protože jsem se trochu rozpovídal a přestože jsem se snažil obě videa spojit do jednoho, výsledný soubor se mi nepodařilo nahrát na Youtube. Pod videi najdete i zdrojové kódy. Výsledný carousel si můžete prohlédnout zde
PHP:
add_shortcode('carousel', 'shortcode_carousel'); function shortcode_carousel($atts, $content = null) { wp_enqueue_script( 'jquery.carouFredSel' ); $html = '<div class="related-wrap"> <div id="carousel" class="simple-carousel tri-carousel-wrapper"> <div class="tri-carousel"><ul>'; $html .= do_shortcode($content); $html .= '</ul><div class="tri-nav"> <span class="tri-nav-prev">Previous</span> <span class="tri-nav-next">Next</span> </div></div></div></div>'; return $html; } add_shortcode('car-item', 'shortcode_car_item'); function shortcode_car_item($atts, $content = null) { extract(shortcode_atts(array( 'linktarget' => '_self', ), $atts)); $html = '<li>'; $html .= '<a href="'.$atts['link'].'" target="'.$linktarget.'"> <img src="'.$atts['image'].'" alt="'.$atts['alt'].'" /></a>'; $html .= '</li>'; return $html; } |
CSS
.related-wrap{ margin-bottom:55px; overflow:hidden; } .tri-carousel-wrapper{ background:none; padding:0px 0px; position:relative; } .tri-carousel{ overflow:hidden; } .related-wrap .tri-carousel{ padding-left:44px; } .simple-carousel{ padding:0; } .simple-carousel .tri-carousel{ padding-left:13px; } .simple-carousel .tri-carousel li{ height:117px; text-align:center; line-height:117px; border:1px solid #eeeded; width:159px; margin-right:13px; } .simple-carousel .tri-carousel li img{ vertical-align:middle; } .simple-carousel .tri-nav-prev, .simple-carousel .tri-nav-next{ top:42px !important; } .tri-carousel ul{ list-style:none; margin:0; padding:0; } .tri-carousel ul li{ height:100%; float:left; display:block; margin:0; padding:0; margin-right:44px; } .tri-carousel ul li a{ display:block; } .tri-carousel ul li a img{ border:none; } .tri-nav-prev, .tri-nav-next { display: block; background-color: rgba(0, 0, 0, 0.5); background-repeat: no-repeat; width: 29px; height: 29px; position: absolute; text-indent:-10000px; opacity:0.8; z-index:1000; } .no-rgba .tri-nav-prev, .no-rgba .tri-nav-next{ background-color:#3e3e3e; } .tri-nav-prev:hover, .tri-nav-next:hover{ opacity:1; } .tri-nav-prev { background-image: url('images/arrow-bullet.png'); background-position: center center; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); left: 0; } .tri-nav-next { background-image: url('images/arrow-bullet.png'); background-position: center center; right: 0; } |
Javascript
//carouFredSel if(jQuery().carouFredSel) { jQuery('.simple-carousel').each(function() { jQuery(this).find('ul').carouFredSel({ auto: false, circular :true, prev: jQuery(this).find('.tri-nav-prev'), next: jQuery(this).find('.tri-nav-next'), width: '100%', }); }); } |
