SimionBaws.ro

To implement a fade transition for your bootstrap carousel, add and use the following class to the carousel main holder.
.carousel.c-fade .item {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.carousel.c-fade .active.left,
.carousel.c-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.c-fade .next,
.carousel.c-fade .prev {
left: 0;
z-index: 1;
}
.carousel.c-fade .carousel-control {
z-index: 3;
}
Example:
<div id="my-carousel" class="carousel slide c-fade">

Works like a charm.

Also it add automatic ids for your tags, for automatic linking.

Demo here: http://assist-software.net/blog/qualsyst-iso-management-application
function create_automatic_toc($content) {
preg_match_all( '/<h([1-6])(.*)>([^<]+)<\/h[1-6]>/i', $content, $matches, PREG_SET_ORDER );

global $anchors;

$anchors = array();
$toc = '<ul class="toc">'."\n";
$i = 0;

foreach ( $matches as $heading ) {

if ($i == 0)
$startlvl = $heading[1];
$lvl = $heading[1];

$ret = preg_match( '/id=[\'|"](.*)?[\'|"]/i', stripslashes($heading[2]), $anchor );
if ( $ret && $anchor[1] != '' ) {
$anchor = stripslashes( $anchor[1] );
$add_id = false;
} else {
$anchor = preg_replace( '/\s+/', '-', preg_replace('/[^a-z\s]/', '', strtolower( $heading[3] ) ) );
…