{"id":33994,"date":"2019-03-04T11:33:04","date_gmt":"2019-03-04T11:33:04","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&#038;p=33994"},"modified":"2022-08-03T07:08:52","modified_gmt":"2022-08-03T07:08:52","slug":"content-slider","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/content-slider\/","title":{"rendered":"Content Slider"},"content":{"rendered":"<div class=\"block-demo block-demo-default\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><strong>Image slider<\/strong><\/p>\n<div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-no sue-content-slider-style-light  owl-carousel\" data-animatein=\"zoomIn\" data-animateout=\"zoomOut\" data-autoplay=\"3000\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"false\" data-autoheight=\"yes\">\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\"><a href=\"https:\/\/getshortcodes.com\/shortcodes\/content_slider\/\"><img decoding=\"async\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2017\/08\/slider-image-1.jpg\" height=\"426\" \/><\/a><\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\"><a href=\"https:\/\/getshortcodes.com\/shortcodes\/content_slider\/\"><img decoding=\"async\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2017\/08\/slider-image-2.jpg\" \/><\/a><\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\"><a href=\"https:\/\/getshortcodes.com\/shortcodes\/content_slider\/\"><img decoding=\"async\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2017\/08\/slider-image-3.jpg\" \/><\/a><\/div>\n<\/div>\n\t<\/div>\n\t<div class=\"block-demo-source\">\n\t\t<pre contenteditable=\"true\">&lt;strong&gt;Image slider&lt;\/strong&gt;\n<div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-no sue-content-slider-style-&quot;light&quot;  owl-carousel\" data-animatein=\"false\" data-animateout=\"false\" data-autoplay=\"0\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"false\" data-autoheight=\"yes\">\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">&lt;a href=&quot;https:\/\/getshortcodes.com\/shortcodes\/content_slider\/&quot;&gt;&lt;img src=&quot;https:\/\/getshortcodes.com\/wp-content\/uploads\/2017\/08\/slider-image-1.jpg&quot; height=&quot;426&quot; \/&gt;&lt;\/a&gt;<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">&lt;a href=&quot;https:\/\/getshortcodes.com\/shortcodes\/content_slider\/&quot;&gt;&lt;img src=&quot;https:\/\/getshortcodes.com\/wp-content\/uploads\/2017\/08\/slider-image-2.jpg&quot; \/&gt;&lt;\/a&gt;<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">&lt;a href=&quot;https:\/\/getshortcodes.com\/shortcodes\/content_slider\/&quot;&gt;&lt;img src=&quot;https:\/\/getshortcodes.com\/wp-content\/uploads\/2017\/08\/slider-image-3.jpg&quot; \/&gt;&lt;\/a&gt;<\/div>\n<\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n<div class=\"block-demo block-demo-default\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><strong>Panels slider<\/strong><\/p>\n<div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-no sue-content-slider-style-default  owl-carousel\" data-animatein=\"false\" data-animateout=\"false\" data-autoplay=\"5000\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"false\" data-autoheight=\"yes\">\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"sue-panel\" data-url=\"\" data-target=\"self\" style=\"background-color:#ffffff;color:#333333;border-radius:0px;box-shadow:0px 1px 2px #eeeeee;border:1px solid #cccccc\">\n<div class=\"sue-panel-content su-u-trim\" style=\"padding:15px;text-align:left\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum<\/div>\n<\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"sue-panel\" data-url=\"\" data-target=\"self\" style=\"background-color:#ffffff;color:#333333;border-radius:0px;box-shadow:0px 1px 2px #eeeeee;border:1px solid #cccccc\">\n<div class=\"sue-panel-content su-u-trim\" style=\"padding:15px;text-align:left\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum<\/div>\n<\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"sue-panel\" data-url=\"\" data-target=\"self\" style=\"background-color:#ffffff;color:#333333;border-radius:0px;box-shadow:0px 1px 2px #eeeeee;border:1px solid #cccccc\">\n<div class=\"sue-panel-content su-u-trim\" style=\"padding:15px;text-align:left\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t<div class=\"block-demo-source\">\n\t\t<pre contenteditable=\"true\">&lt;strong&gt;Panels slider&lt;\/strong&gt;\n<div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-no sue-content-slider-style-default  owl-carousel\" data-animatein=\"false\" data-animateout=\"false\" data-autoplay=\"5000\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"false\" data-autoheight=\"yes\">\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"sue-panel\" data-url=\"\" data-target=\"self\" style=\"background-color:#ffffff;color:#333333;border-radius:0px;box-shadow:0px 1px 2px #eeeeee;border:1px solid #cccccc\"><div class=\"sue-panel-content su-u-trim\" style=\"padding:15px;text-align:left\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum<\/div><\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"sue-panel\" data-url=\"\" data-target=\"self\" style=\"background-color:#ffffff;color:#333333;border-radius:0px;box-shadow:0px 1px 2px #eeeeee;border:1px solid #cccccc\"><div class=\"sue-panel-content su-u-trim\" style=\"padding:15px;text-align:left\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum<\/div><\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"sue-panel\" data-url=\"\" data-target=\"self\" style=\"background-color:#ffffff;color:#333333;border-radius:0px;box-shadow:0px 1px 2px #eeeeee;border:1px solid #cccccc\"><div class=\"sue-panel-content su-u-trim\" style=\"padding:15px;text-align:left\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum<\/div><\/div>\n<\/div>\n<\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n<div class=\"block-demo block-demo-default\">\n\t<div class=\"block-demo-viewport\">\n\t\t<p><strong>Mixed content<\/strong><\/p>\n<div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-yes sue-content-slider-style-dark  owl-carousel\" data-animatein=\"slideInDown\" data-animateout=\"zoomOutDown\" data-autoplay=\"0\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"true\" data-autoheight=\"yes\">\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\">\n<div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Spoiler shortcode<\/div>\n<div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Hidden content<\/div>\n<\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"su-service\">\n<div class=\"su-service-title\" style=\"padding-left:46px;min-height:32px;line-height:32px\"><i class=\"sui sui-star\" style=\"font-size:32px;color:#fccb00\"><\/i> Service shortcode<\/div>\n<div class=\"su-service-content su-u-clearfix su-u-trim\" style=\"padding-left:46px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis. Donec molestie tempor mattis. Sed elementum, est vitae tincidunt faucibus, metus dui lobortis orci, non auctor ipsum elit quis nunc. Integer nec mattis nunc, eu dapibus nisl. Proin in eleifend lorem. Praesent mattis eros in orci aliquet fermentum.<\/div>\n<\/div>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#aaaaaa;border-radius:3px;max-width:none\">\n<div class=\"su-box-title\" style=\"background-color:#dddddd;color:#393939;border-top-left-radius:1px;border-top-right-radius:1px\">Box shortcode<\/div>\n<div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis.<\/div>\n<\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"su-row\">\n<div class=\"su-column su-column-size-1-2\">\n<div class=\"su-column-inner su-u-clearfix su-u-trim\">\n<h3>YouTube video<\/h3>\n<div class=\"su-youtube su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/DR2c266yWEA?\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<div class=\"su-column su-column-size-1-2\">\n<div class=\"su-column-inner su-u-clearfix su-u-trim\">\n<h3>Google map<\/h3>\n<div class=\"su-gmap su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"\/\/maps.google.com\/maps?q=Moscow&amp;output=embed\" title=\"\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t<div class=\"block-demo-source\">\n\t\t<pre contenteditable=\"true\">&lt;strong&gt;Mixed content&lt;\/strong&gt;\n<div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-&quot;yes&quot; sue-content-slider-style-&quot;dark&quot;  owl-carousel\" data-animatein=\"false\" data-animateout=\"false\" data-autoplay=\"0\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"false\" data-autoheight=\"yes\">\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"su-spoiler su-spoiler-style-&quot;fancy&quot; su-spoiler-icon-&quot;plus-square-1&quot; su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>&quot;Spoiler<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Hidden content<\/div><\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"su-service\"><div class=\"su-service-title\" style=\"padding-left:46px;min-height:32px;line-height:32px\"><i class=\"sui sui-&quot;\" style=\"font-size:32px;color:&quot;#fccb00&quot;\"><\/i> &quot;Service<\/div><div class=\"su-service-content su-u-clearfix su-u-trim\" style=\"padding-left:46px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis. Donec molestie tempor mattis. Sed elementum, est vitae tincidunt faucibus, metus dui lobortis orci, non auctor ipsum elit quis nunc. Integer nec mattis nunc, eu dapibus nisl. Proin in eleifend lorem. Praesent mattis eros in orci aliquet fermentum.<\/div><\/div>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:quot#ddddddquot;border-radius:3px;max-width:none\"><div class=\"su-box-title\" style=\"background-color:quot#ddddddquot;color:quot#393939quot;border-top-left-radius:1px;border-top-right-radius:1px\">&quot;Box<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis.<\/div><\/div>\n<\/div>\n<div class=\"sue-content-slide su-u-clearfix su-u-trim\">\n<div class=\"su-row\"><div class=\"su-column su-column-size-&quot;1-2&quot;\"><div class=\"su-column-inner su-u-clearfix su-u-trim\">\n&lt;h3&gt;YouTube video&lt;\/h3&gt;\n<div class=\"su-youtube su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/DR2c266yWEA?\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div>\n<\/div><\/div><div class=\"su-column su-column-size-&quot;1-2&quot;\"><div class=\"su-column-inner su-u-clearfix su-u-trim\">\n&lt;h3&gt;Google map&lt;\/h3&gt;\n<div class=\"su-gmap su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"\/\/maps.google.com\/maps?q=Moscow&amp;output=embed\" title=\"\"><\/iframe><\/div>\n<\/div><\/div><\/div>\n<\/div>\n<\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n\n<p class=\"has-black-color has-light-background-color has-text-color has-background\">This shortcode is available in <a href=\"\/pricing\/\">Shortcodes Ultimate Pro<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"description\">Description<\/h2>\n\n\n\n<p>This is a very powerful shortcode, which allows you to create a slider from almost everything. You can create slides from any HTML markup or even other shortcodes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"options\">Options<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"su_content_slider-slider-container\"><div class=\"sue-content-slider sue-content-slider-arrows-yes sue-content-slider-pages-no sue-content-slider-style-default  owl-carousel\" data-animatein=\"false\" data-animateout=\"false\" data-autoplay=\"5000\" data-speed=\"500\" data-arrows=\"true\" data-pages=\"false\" data-autoheight=\"yes\"><\/div> \u2013 slider container<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Option name<\/th><th>Possible values<\/th><th>Default value<\/th><\/tr><tr><td><strong>style<\/strong><br>Choose slider skin<\/td><td>default (Default)<br>dark (Dark)<br>light (Light)<\/td><td>default<\/td><\/tr><tr><td><strong>effect<\/strong><br>Choose transition animation<\/td><td>slide (Slide)<br>fade (Fade)<br>fadeUp (Fade Up)<br>backSlide (Back Slide)<br>goDown (Go Down)<\/td><td>slide<\/td><\/tr><tr><td><strong>arrows<\/strong><br>Show left\/right arrows navigation<\/td><td>no (Never)<br>hover (On hover)<br>yes (Always)<\/td><td>yes<\/td><\/tr><tr><td><strong>pages<\/strong><br>Show pagination navigation<\/td><td>no (Never)<br>hover (On hover)<br>yes (Always)<\/td><td>no<\/td><\/tr><tr><td><strong>autoplay<\/strong><br>Specify autoplay interval (seconds). Set to 0 to disable autoplay<\/td><td>Number from 0 to 60<\/td><td>5<\/td><\/tr><tr><td><strong>class<\/strong><br>Additional CSS class name(s) separated by space(s)<\/td><td>CSS class name(s) separated by space(s)<\/td><td><em>\u2013 none \u2013<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"su_content_slide-single-slide\"><div class=\"sue-content-slide su-u-clearfix su-u-trim\"><\/div> \u2013 single slide<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Option name<\/th><th>Possible values<\/th><th>Default value<\/th><\/tr><tr><td><strong>class<\/strong><br>Additional CSS class name(s) separated by space(s)<\/td><td>CSS class name(s) separated by space(s)<\/td><td><em>\u2013 none \u2013<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-small-font-size\">Photos by <a rel=\"noreferrer noopener\" href=\"https:\/\/unsplash.com\/@visualworld\" target=\"_blank\">Matt Palmer<\/a><\/p>\n","protected":false},"featured_media":36664,"template":"","docs_category":[21],"class_list":["post-33994","docs","type-docs","status-publish","has-post-thumbnail","hentry","docs_category-shortcodes"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/33994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media\/36664"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=33994"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=33994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}