Sliders and images

  1. Home  /  Shortcodes  /  Sliders and images
parallax slider parameters
  • id - slider id, html id attribute
  • height
  • loop - true; false;
  • smooth - true; false;
  • slideshow - true; false;
  • speed - slide transition speed in miliseconds (1 sec = 1000 milisec)
  • animspeed - animation speed, slide transition speed in miliseconds (1 sec = 1000 milisec)
  • next_section - next section id
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.
  • imgsrc - image source, image
  • controlnav - show control navigation - true; false;
  • dirnav - show direction navigation - true; false;
  • imgsrc_raw - image source, image
parallax slider item parameters
  • header
  • sub_header - sub header
  • button_text - button text
  • button_link - button link
  • next_section
  • header_anim - header animation effect
  • sub_header_anim - sub header animation effect
  • button_anim - button animation effect

[sourcecode language=”html”][parallax_slider next_section="nextSection2" imgsrc="http://pluto.themewoodmen.com/woo/wp-content/uploads/sites/4/2014/04/home-v2-slider-parallax.jpg"]…[/parallax_slider][/sourcecode]
[sourcecode language=”html”][parallax_slider_item header="PLUTO HTML TEMPLATE" sub_header="CLEAN, MULTIPURPOSE DESIGN" button_text="Purchase Template" button_link="http://themeforest.net/item/pluto-parallax-wordpress-portfolio-theme/7640670?ref=ThemeWoodmen"][/sourcecode]

flex slider parameters
  • id - slider id, html id attribute
  • height
  • loop - true; false;
  • smooth - true; false;
  • slideshow - true; false;
  • speed - slide transition speed in miliseconds (1 sec = 1000 milisec)
  • animspeed - animation speed, slide transition speed in miliseconds (1 sec = 1000 milisec)
  • controls - control navigation - true; false;
  • dircontrols - direction navigation - true; false;
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.
flex slider item parameters
  • imgsrc - source, image
  • align - select style - left; center;
  • imgsrc_raw - source, image

[sourcecode language=”html”][flex_slider]…[/flex_slider][/sourcecode]
[sourcecode language=”html”][flex_slider_item imgsrc="http://pluto.themewoodmen.com/woo/wp-content/uploads/sites/4/2014/04/home-v1-slider-01.jpg"][/sourcecode]

big slider parameters
  • id - slider id, html id attribute
  • height
  • loop - true; false;
  • smooth - true; false;
  • slideshow - true; false;
  • speed - slide transition speed in miliseconds (1 sec = 1000 milisec)
  • animspeed - animation speed, slide transition speed in miliseconds (1 sec = 1000 milisec)
  • next_section - next section id
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.
  • controlnav - show control navigation - true; false;
  • dirnav - show direction navigation - true; false;
big slider item parameters
  • header
  • sub_header - sub header
  • button_text - button text
  • button_link - button link
  • imgsrc - source, image
  • next_section
  • header_anim - header animation effect
  • sub_header_anim - sub header animation effect
  • button_anim - button animation effect
  • imgsrc_raw - source, image

[sourcecode language=”html”][big_slider next_section="nextSection"]…[/big_slider][/sourcecode]
[sourcecode language=”html”][big_slider_item header="Parallax Slider" sub_header="CREATIVE AND UNIQUE" button_text="Buy Now" button_link="http://themeforest.net/item/pluto-parallax-wordpress-portfolio-theme/7640670?ref=ThemeWoodmen" imgsrc="http://pluto.themewoodmen.com/woo/wp-content/uploads/sites/4/2014/04/home-v2-slider-01.jpg"][/sourcecode]

  • Typography at its best is a visual form of language linking timelessness and time.

    ROBERT BRINGHURST

  • The only important thing about design is how it relates to people.

    VICTOR PAPANEK
simple slider parameters
  • id - slider id, html id attribute
  • height
  • loop - true; false;
  • smooth - true; false;
  • slideshow - true; false;
  • speed - slide transition speed in miliseconds (1 sec = 1000 milisec)
  • animspeed - animation speed, slide transition speed in miliseconds (1 sec = 1000 milisec)
  • controls - control navigation - true; false;
  • dircontrols - direction navigation - true; false;
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.

[sourcecode language=”html”][simple_slider height="100%" controls="true"]…[/simple_slider][/sourcecode]
[sourcecode language=”html”][simple_slider_item][blockquote type="centered" author="ROBERT BRINGHURST"]…[/blockquote][/simple_slider_item][/sourcecode]

Gallery slider

[sourcecode language=”html”][gallery_slider limit="3" post_type="portfolio" image_size="thumbnail_medium"][/sourcecode]

gallery slider parameters
  • id - slider id, html id attribute
  • post_type - select post type - post; page; attachment; revision; nav_menu_item; custom_css; customize_changeset; oembed_cache; user_request; wp_block; wp_template; wp_template_part; wp_global_styles; wp_navigation; product; product_variation; shop_order; shop_order_refund; shop_coupon; shop_order_placehold; ct_size_guide; view360; exactmetrics_note; faq; gallery; job; portfolio; timeline;
  • image_size - select registered image size - thumbnail; medium; medium_large; large; 1536x1536; 2048x2048; timeline_featured_image; timeline_thumbnail; featured_image; work_single_horizontal; work_single; featured_work; featured_image_effects; featured_image_small; woocommerce_thumbnail; woocommerce_single; woocommerce_gallery_thumbnail;
  • limit
  • height
  • loop - true; false;
  • smooth - true; false;
  • slideshow - true; false;
  • speed - slide transition speed in miliseconds (1 sec = 1000 milisec)
  • animspeed - animation speed, slide transition speed in miliseconds (1 sec = 1000 milisec)
  • controls - control navigation - true; false;
  • dircontrols - direction navigation - true; false;
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.
  • skip - skip x elements, allows to skip x elements from collection
  • order - order in which data should be fetched - asc; desc;
  • orderby - order in which data should be fetched - date; ID; author; title; name; modified; parent; rand; menu_order;
  • notids - exclude post id
  • slug - post slug, filter by slug
  • post_parent - post parent id, filter by parent id
  • cat - categories ids, comma separated values: 2,3,5. to exclude catgories use '-' minus: -2 will exclude category 2
  • cat_name - category name, name of category to filter
  • tag - tag name (slug), comma separated values: tag1,tag2 to exclude tags use '-' minus: -mytag will exclude tag 'mytag'
  • s - keyword search, show item with certain keyword

Image

[sourcecode language=”html”][img src="http://pluto.themewoodmen.com/woo/wp-content/uploads/sites/4/2014/04/works-cropped-5-300x300.jpg" align="default"][/sourcecode]

image parameters
  • src - image, image source
  • alt - alternate text
  • width - image width
  • height - image height
  • align - image align - default; left; center; right;
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.
  • title - title images
  • animation - animate this element once it becomes visible. supported animations: https://daneden.me/animate/
  • animation_speed - animation speed, in miliseconds ex. 2000 is 2 seconds
  • src_raw - image, image source

Rounded image

[sourcecode language=”html”][rounded_img src="http://pluto.themewoodmen.com/woo/wp-content/uploads/sites/4/2014/04/team-04.jpg"][/sourcecode]

rounded image parameters
  • src - image, image source
  • alt - alternate text
  • align - left; right;
  • class - custom class, adding custom class allows you to set diverse styles in css to the element. type in name of class, which you defined in css. you can add as much classes as you like.
  • animation - chapter animation effect
  • src_raw - image, image source

Get the newsletter

Follow us