scrollable list – Content Views Pro

Scrollable list – vertical scroll

CVP — Fri, 04 Aug 2017 08:50:47 +0000

Content Views helps you to display posts in scrollable list easily without coding. By default, the posts list will scroll from right to left.
To use vertical scroll (bottom to top), please:

Add this code to Custom CSS field in Content Views >> Settings page:

/* Scrollable list - vertical scroll */
.vertical .carousel-inner{height:100%}.pt-cv-carousel.vertical .item{-webkit-transition:.6s ease-in-out top!important;-moz-transition:.6s ease-in-out top!important;-ms-transition:.6s ease-in-out top!important;-o-transition:.6s ease-in-out top!important;transition:.6s ease-in-out top!important}.pt-cv-carousel.vertical .active{top:0!important}.pt-cv-carousel.vertical .next{top:400px!important}.pt-cv-carousel.vertical .prev{top:-400px!important}.pt-cv-carousel.vertical .next.left,.pt-cv-carousel.vertical .prev.right{top:0!important}.pt-cv-carousel.vertical .active.left{top:-400px!important}.pt-cv-carousel.vertical .active.right{top:400px!important}.pt-cv-carousel.vertical .item{left:0!important;transform:none!important}

Add this code to Custom JS field in Content Views >> Settings page:
```
$('.pt-cv-carousel').addClass('vertical')
```

Best regards,

Scrollable list – Fix: click on next/prev button caused the page to scroll

admin1 — Thu, 15 Jun 2017 03:06:08 +0000

If the page moves up or down on click the navigation buttons (next, previous) of Scrollable list, it means there was a custom Javascript handle of theme or another plugin attached to these buttons.
To resolve this issue, please add this code to Custom JS field in Content Views >> Settings page:

/* Content Views - Fix page scrolls on click next/previous button of Scrollable List */
setTimeout(function() {
$('.pt-cv-scrollable .carousel-control').off('click');
}, 2000);

If you are using Content Views Free, please add above code with this instruction (click here).

Best regards,

Scrollable list – add a Pause button

admin1 — Wed, 07 Jun 2017 05:56:39 +0000

With Content Views Pro, you can enable next, prev and indicator buttons in the Scrollable list with friendly settings.
To add the pause button, please add this code to Custom JS field in Content Views >> Settings page:

/* Add pause button for scrollable list */
$('.pause.carousel-control').on('click',function(){
    var $carousel = $(this).closest('[data-ride="cvcarousel"][data-interval]'), $button = $(this).find('span');
    if($button.hasClass('glyphicon-pause')){
        $carousel.cvcarousel('pause');
        $button.removeClass('glyphicon-pause').addClass('glyphicon-play');
    } else {
        $carousel.cvcarousel('cycle');
        $button.addClass('glyphicon-pause').removeClass('glyphicon-play');
    }
});

To show the pause button for all scrollable lists, add this code below above code

$('.left.carousel-control').after('');

To show the pause button for specific scrollable lists only, add this code below above code:

$('.left.carousel-control', '#pt-cv-view-VIEWID').after('');

(replace VIEWID with ID of your View)

Best regards,

Scrollable list – customize style, color, position…

admin1 — Tue, 12 Jul 2016 03:43:30 +0000

All custom CSS should be put in “Custom CSS” field in Content Views >> Settings page.

To make the changes for only specific View, please replace .pt-cv-scrollable in below code with
#pt-cv-view-VIEWID (with VIEWID is the ID of your View)

Background color of the next/prev buttons ( <> )

.pt-cv-scrollable .carousel-control span {background: YOUR_COLOR !important}

Hover color of next/prev buttons ( <> )

.pt-cv-scrollable .carousel-control:hover span {color: YOUR_COLOR !important}

Move next/prev buttons ( <> ) to bottom

.pt-cv-scrollable .carousel-control {bottom: -20px!important; top: auto!important;}

Center next/prev buttons ( <> ) vertically on both sides

.pt-cv-scrollable .item{padding-left:30px;padding-right:30px}.pt-cv-scrollable .carousel-control.left{left:0!important;}.pt-cv-scrollable .carousel-control.right{right:0!important;}.pt-cv-scrollable .carousel-control.left,.pt-cv-scrollable .carousel-control.right{position:absolute!important;margin-top:-25px!important;top:50%!important;}

Replace next/prev buttons ( <> ) with custom arrow images

.pt-cv-wrapper .glyphicon-chevron-left:before, .pt-cv-wrapper .glyphicon-chevron-right:before {content: "" !important;}
.pt-cv-wrapper .glyphicon-chevron-left {background: url(URL_OF_ARROW_1); background-size: contain;}
.pt-cv-wrapper .glyphicon-chevron-right {background: url(URL_OF_ARROW_2); background-size: contain;}

Background color of indicator (circle icon at bottom of slides)

.pt-cv-scrollable .pt-cv-carousel-indicators li.active {background-color: YOUR_COLOR !important; background-image: none !important;}

Add border for each post

.pt-cv-scrollable .pt-cv-carousel-caption {border:1px solid YOUR_COLOR; padding:10px}

Slowdown the transition duration

.pt-cv-scrollable .item {transition-duration: 2s !important;}

Remove red background, just keep white next/prev buttons

.pt-cv-scrollable .carousel-control .glyphicon{background:0 0!important;text-shadow:0 0 11px rgba(171,171,171,.925);font-size:30px!important;color:#fff!important}

Change background color of Caption on hover

#pt-cv-view-VIEWID .pt-cv-carousel-caption:hover {background-color: YOUR_COLOR !important;}

(replace VIEWID with ID of your View)

Show text on the right of the thumbnail

By default, text is shown below the thumbnail in the Scrollable list.
To show text below the thumbnail, here is the CSS:

#pt-cv-view-VIEWID .pt-cv-thumbnail {
    width: 50%;
}
#pt-cv-view-VIEWID div.pt-cv-carousel-caption {
    left: 50% !important;
    top: 1px !important;
    width: 50% !important;
}

(replace VIEWID with ID of your View)

Best regards,

Scrollable list – Fix: click on next/prev button doesn’t work

admin1 — Mon, 14 Dec 2015 04:46:41 +0000

In Scrollable list, if slide doesn’t change when you click next/prev button, the possible reason is impact of theme’s or another plugin’s script.

To resolve this issue, please add this code to Custom JS field in Content Views >> Settings page:

/* Content Views - Fix Scrollable List next/prev doesn't work */
setTimeout(function() {
$(".carousel-control.left").off("click").on("click",function(){$(this).parent().cvcarousel("prev")}),$(".carousel-control.right").off("click").on("click",function(){$(this).parent().cvcarousel("next")});
}, 2000);

If you are using Content Views Free, please add above code with this instruction (click here).

Best regards,