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 = '

        

        
';
	$html .= do_shortcode($content);
	$html .= '

        Previous
        Next
        
';
	return $html;
}
 
add_shortcode('car-item', 'shortcode_car_item');
function shortcode_car_item($atts, $content = null) {
	extract(shortcode_atts(array(
		'linktarget' => '_self',
	), $atts));

	$html = '

'; $html .= ' '; $html .= '

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