WordPress.org

Ready to get started?Download WordPress

Forums

CPT Bootstrap Carousel
[resolved] Vertical slider? (2 posts)

  1. nicozz
    Member
    Posted 1 year ago #

    Hi,

    Thank you for your plugin.

    I would like to know if it ispossible to have a vertical slider instead of horizontal?

    Thank you.
    Regards,
    Nick.

    http://wordpress.org/plugins/cpt-bootstrap-carousel/

  2. Phil Ewels
    Member
    Plugin Author

    Posted 1 year ago #

    Hi nicozz,

    The bootstrap carousel is animated via CSS transitions, so you can convert it into a vertical slider by using some additional CSS rules.

    Thankfully, someone else has already done this:
    https://github.com/mcuznz/bootstrap-carousel-vertical

    The problem is that their CSS ties into an additional class which isn't present on the plugin slider. To make all carousels on your website vertical, just remove the 'vertical' class from the CSS.

    eg:

    .carousel .carousel-inner {
      height: 100%;
    }
    .carousel .item {
      -webkit-transition: 0.6s ease-in-out top;
      -moz-transition:    0.6s ease-in-out top;
      -ms-transition:     0.6s ease-in-out top;
      -o-transition:      0.6s ease-in-out top;
      left:               0;
    }
    .carousel .active,
    .carousel .next.left,
    .carousel .prev.right    { top:     0; }
    .carousel .next,
    .carousel .active.right  { top:  100%; }
    .carousel .prev,
    .carousel .active.left   { top: -100%; }

    If you include this CSS after your bootstrap CSS, you should be away. Please note that the above code is untested.

    Hope this helps!

    Phil

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.