Flexslider

Horizontal Slide Effect

  • image
  • image
  • image
[flexslider animationspeed="500" interval="3000" animationtype="slide" directionnav="true" autoplay="false" direction="horizontal" controlnav="true"] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Gallery-Image-1.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Gallery-Image-1.jpg[/flexslide] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Girl-Looking-Outside.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Girl-Looking-Outside.jpg[/flexslide] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Guy-Floor-Selfie-Full.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Guy-Floor-Selfie-Full.jpg[/flexslide] [/flexslider]

Vertical Slide Effect

  • image
  • image
  • image
[flexslider animationspeed="500" interval="3000" animationtype="slide" directionnav="true" autoplay="false" direction="vertical" controlnav="true"][flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Girl-Looking-Outside.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Girl-Looking-Outside.jpg[/flexslide] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Gallery-Image-1.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Gallery-Image-1.jpg[/flexslide] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Guy-Floor-Selfie-Full.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Guy-Floor-Selfie-Full.jpg[/flexslide] [/flexslider]

Fade Effect

  • image
  • image
  • image
[flexslider animationspeed="500" interval="3000" animationtype="fade" directionnav="true" autoplay="false" direction="horizontal" controlnav="true"] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Guy-Floor-Selfie-Full.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Guy-Floor-Selfie-Full.jpg[/flexslide][flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Gallery-Image-1.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Gallery-Image-1.jpg[/flexslide] [flexslide target="_parent" link="http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Girl-Looking-Outside.jpg"]http://imperio.djdesignerlab.com/wp-content/uploads/2014/05/Girl-Looking-Outside.jpg[/flexslide] [/flexslider]

Flexslider Options

  • animation: Enter the animation speed value.
  • interval: Choose the interval between each slides.
  • animationtype: Select the type of animation. “fade”, “slide”.
  • directionnav: Choose whether to display direction navigation arrows. “true”, “false’.
  • autoplay: Should the slider automatically start? “true”, “false”.
  • direction: Choose the direction of slider if slide is selected. “horizontal”, “vertical”.
  • controlnav: Choose whether to display control navigation bullets. “true”, “false”.

Flexslider Item Options

  • link: Enter the link if you want to link the image with something, else just leave it blank.
  • target: Select the link’s target. “_parent”, “_self”, “_blank”.
  • content: Enter the image path. e.g. [flexslide]image.jpg[/flexslide].