Sly Slider init

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:

Read More
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);
}

Related posts

1 comment

  1. var sly = new Sly(frame, options, callbackMap).init()
    

    Here, you need to give value of element selector in frame and define callbacks in callbackMap. So in your case, it will be

    var sly = new Sly('#frame', options).init(); 
    

    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).init();
    }
    

Comments are closed.