I’m using Sly Slider with a free wordpress theme. I’ve enqueued properly the js file, set the html markup and wrote a jquery function according to the documentation but cannot to seem to get it to work verticaly. What am I missing;
My php function:
function sly_slider()
{
$args = array(
'post_type' => 'yacht',
'posts_per_page' => -1
);
$yachts = get_posts( $args );
echo '<div class="frame" id="frame">';
echo '<ul class="slidee">';
foreach ($yachts as $yacht) {
$id = $yacht->ID;
$image = get_the_post_thumbnail( $id, 'post-thumbnail' );
$title = get_the_title( $yacht );
$excerpt = get_the_excerpt();
echo '<li class="yacht-slider-item">';
echo '<h5 class="yacht-slider-title">'. $title .'</h5>';
echo $image;
echo $excerpt;
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
My css (according to the doc):
.frame { padding: 0; width: 300px; height: 400px; }
.frame .slidee { margin: 0; padding: 0; width: 100%; list-style: none; }
.frame .slidee li { float: left; margin: 0 0 5px 0; padding: 0; width: 100%; height: 100px; }
My jQuery function:
function sidebar_sly()
{
var options = {
slidee = '.slidee',
itemSelector: 'li',
horizontal: 0,
itemNav: 'basic',
speed: 800,
activatePageOn: 'click',
cycleBy: 'pages',
cycleInterval: 5000,
startPaused: false,
pageBuilder: function () {
return '<li></li>';
}
};
var sly = new Sly(frame, options, callbackMap).init();
jQuery('#frame').sly(options);
}
Here, you need to give value of element selector in frame and define callbacks in callbackMap. So in your case, it will be
jQuery Function: