{"id":1168,"date":"2013-09-25T19:14:27","date_gmt":"2013-09-25T19:14:27","guid":{"rendered":"http:\/\/musilda.cz\/?p=1168"},"modified":"2013-09-25T19:14:27","modified_gmt":"2013-09-25T19:14:27","slug":"responsivni-carousel-shortcode-video-navod","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/responsivni-carousel-shortcode-video-navod\/","title":{"rendered":"Responsivn\u00ed Carousel shortcode video n\u00e1vod"},"content":{"rendered":"<p>Carousel slider je variantou slideru, kdy se zobrazuje v\u00edce ne\u017e jeden obr\u00e1zek a pouze se posouvaj\u00ed do stran. \u010casto se s nimi m\u016f\u017eete setkat na firemn\u00edch str\u00e1nk\u00e1ch, kde se posunuj\u00ed loga spolupracuj\u00edc\u00edch firem. Ve video n\u00e1vodu v\u00e1m uk\u00e1\u017ei, jak vytvo\u0159it podobn\u00fd carousel pomoc\u00ed shortcodu.<!--more--><\/p>\n<p>Videa jsou tentokr\u00e1t dv\u011b, proto\u017ee jsem se trochu rozpov\u00eddal a p\u0159esto\u017ee jsem se sna\u017eil ob\u011b videa spojit do jednoho, v\u00fdsledn\u00fd soubor se mi nepoda\u0159ilo nahr\u00e1t na Youtube. Pod videi najdete i zdrojov\u00e9 k\u00f3dy. V\u00fdsledn\u00fd carousel si m\u016f\u017eete prohl\u00e9dnout <a href=\"http:\/\/tutorial.9e.cz\/shortcody\/carousel-shortcodes\/\" target=\"_blank\" rel=\"noopener\">zde<\/a><\/p>\n<p>PHP:<\/p>\n<pre lang=\"php\">\nadd_shortcode('carousel', 'shortcode_carousel');\nfunction shortcode_carousel($atts, $content = null) {\n\twp_enqueue_script( 'jquery.carouFredSel' );\n\n\t$html = '<div class=\"related-wrap\">\n        <div id=\"carousel\" class=\"simple-carousel tri-carousel-wrapper\">\n        <div class=\"tri-carousel\"><ul>';\n\t$html .= do_shortcode($content);\n\t$html .= '<\/ul><div class=\"tri-nav\">\n        <span class=\"tri-nav-prev\">Previous<\/span>\n        <span class=\"tri-nav-next\">Next<\/span>\n        <\/div><\/div><\/div><\/div>';\n\treturn $html;\n}\n\nadd_shortcode('car-item', 'shortcode_car_item');\nfunction shortcode_car_item($atts, $content = null) {\n\textract(shortcode_atts(array(\n\t\t'linktarget' =&gt; '_self',\n\t), $atts));\n\n\t$html = '<li>';\n\t$html .= '<a href=\"'.$atts['link'].'\" target=\"'.$linktarget.'\" rel=\"noopener\">\n        <img decoding=\"async\" src=\"'.$atts['image'].'\" alt=\"'.$atts['alt'].'\" \/><\/a>';\n\t$html .= '<\/li>';\n\treturn $html;\n}\n<\/pre>\n<p>CSS<\/p>\n<pre lang=\"php\">\n.related-wrap{\n\tmargin-bottom:55px;\n  overflow:hidden;\n}\n.tri-carousel-wrapper{\n\tbackground:none;\n\tpadding:0px 0px;\n\tposition:relative;\n}\n.tri-carousel{\n\toverflow:hidden;\n}\n.related-wrap .tri-carousel{\n\tpadding-left:44px;\n}\n.simple-carousel{\n\tpadding:0;\n}\n.simple-carousel .tri-carousel{\n\tpadding-left:13px;\n}\n.simple-carousel .tri-carousel li{\n\theight:117px;\n\ttext-align:center;\n\tline-height:117px;\n\tborder:1px solid #eeeded;\n\twidth:159px;\n\tmargin-right:13px;\n}\n.simple-carousel .tri-carousel li img{\n\tvertical-align:middle;\n}\n.simple-carousel .tri-nav-prev, .simple-carousel .tri-nav-next{\n\ttop:42px !important;\n}\n.tri-carousel ul{\n\tlist-style:none;\n\tmargin:0;\n\tpadding:0;\n}\n.tri-carousel ul li{\n\theight:100%;\n\tfloat:left;\n\tdisplay:block;\n\tmargin:0;\n\tpadding:0;\n\tmargin-right:44px;\n}\n.tri-carousel ul li a{\n\tdisplay:block;\n}\n.tri-carousel ul li a img{\n\tborder:none;\n}\n.tri-nav-prev, .tri-nav-next {\n\tdisplay: block;\n  background-color: rgba(0, 0, 0, 0.5);\n\tbackground-repeat: no-repeat;\n\twidth: 29px;\n\theight: 29px;\n\tposition: absolute;\n\ttext-indent:-10000px;\n\topacity:0.8;\n\tz-index:1000;\n}\n.no-rgba .tri-nav-prev, .no-rgba .tri-nav-next{\n\tbackground-color:#3e3e3e;\n}\n.tri-nav-prev:hover, .tri-nav-next:hover{\n\topacity:1;\n}\n.tri-nav-prev {\n\tbackground-image: url('images\/arrow-bullet.png');\n\tbackground-position: center center;\n    -webkit-transform:rotate(180deg);\n    -moz-transform:rotate(180deg);\n    -o-transform:rotate(180deg);\n    transform:rotate(180deg);\n    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);\n    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);\n\tleft: 0;\n}\n.tri-nav-next {\n\tbackground-image: url('images\/arrow-bullet.png');\n\tbackground-position: center center;\n\tright: 0;\n}\n<\/pre>\n<p>Javascript<\/p>\n<pre lang=\"php\">\n\/\/carouFredSel\n\tif(jQuery().carouFredSel) {\n\t\tjQuery('.simple-carousel').each(function() {\n\t\t\tjQuery(this).find('ul').carouFredSel({\n\t\t\t\tauto: false,\n        circular :true,\n\t\t\t\tprev: jQuery(this).find('.tri-nav-prev'),\n\t\t\t\tnext: jQuery(this).find('.tri-nav-next'),\n\t\t\t\twidth: '100%',\n\t\t\t});\n\t\t});\n\t}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Carousel slider je variantou slideru, kdy se zobrazuje v\u00edce ne\u017e jeden obr\u00e1zek a pouze se posouvaj\u00ed do stran. \u010casto se s nimi m\u016f\u017eete setkat na firemn\u00edch str\u00e1nk\u00e1ch, kde se posunuj\u00ed loga spolupracuj\u00edc\u00edch firem. Ve video n\u00e1vodu v\u00e1m uk\u00e1\u017ei, jak vytvo\u0159it podobn\u00fd carousel pomoc\u00ed shortcodu.<\/p>\n","protected":false},"author":1,"featured_media":1170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,23],"tags":[94],"class_list":["post-1168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shortcodes","category-video-navody","tag-carousel-slider"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1168"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=1168"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/1170"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}