WordPress.org

Forums

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

  1. nicozz
    Member
    Posted 2 years 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 2 years 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

  • CPT Bootstrap Carousel
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.