Responsivní Carousel shortcode video návod

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%',
			});
		});
	}

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *