スライダープラグインのslickについて質問です

１．の方は分からないので2.の方だけ。

まず、1点確認ですが、アニメーションでサイズを変えようとしているのは
slick.jsのデフォルトのdotsですよね？
だとすると.slick-dots liに対してアニメーションさせようとしても ● のサイズは変わりません。
Chromeの開発者ツール等で確認すれば分かることですが、slick.jsのdotsの ● は、
.slick-dots li button::beforeに設定されたフォントです。

従って、jQueryやCSS3transition等でサイズ変更するアニメーションを適用したいならば、
まずフォントを使用する方式をやめ、.slick-dots li button::beforeもしくはその親の
.slick-dots li button自身にオリジナルのスタイルを適用した上で、
そちらにアニメーションを適用する必要があると思われます。

うろ覚えなのでアレですが、::beforeだとそもそもアニメーション処理出来なかったかもしれないので、
その場合は::beforeは非表示にして、button要素自身で処理したほうが良いかもしれません。

試してみてください。

To: kei334さん
失礼しました
質問内容を修正しました

スクロールの件ですが

$(".test").mousewheel(function(en, delta, deltaX, deltaY) {
    $(".test").text(deltaY);
});

このようにすると「.test」でスクロールした時に番号を取得できました

これを利用してスライダーを動かしたいのですが、
slickNextメソッドをどうのように指定したらいいのかわかりません

manabufukaiさんの書かれているのはこういうことかと。

<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) {
    event.preventDefault();
    if ( event.deltaY < 0 ) {
        $( this ).slickNext();
    } else {
        $( this ).slickPrev();
    }
} ); // 未テストです
</script>

【Web Developer Blog: slick slider horizontal scroll with mouse wheel js】
http://blog.thilankad.com/2016/04/slick-slider-horizontal-scroll-with.html

【Feature Request: Mouse wheel support ・ Issue #122 ・ kenwheeler/slick ・ GitHub】
https://github.com/kenwheeler/slick/issues/122

ちなみに jQuery Mouse Wheel Plugin は Safari9 のバグのため Safari ではうまく動かないかもしれません。

【GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.】
https://github.com/jquery/jquery-mousewheel

追記：

<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$( '.variable' ).slick( {
      dots: true
    , infinite: false
    , variableWidth: true
    , draggable:false
} ).on( 'mousewheel', function( event ) {
    event.preventDefault();
    if ( event.deltaY < 0 ) {
        $( this ).slick( 'slickNext' );
    } else {
        $( this ).slick( 'slickPrev' );
    }
} ); // テストしました問題なく動きます
</script>

ありがとうございます
自分なりに以下のコードを試したのですが

<script>
$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) {
    event.preventDefault();
    if ( event.deltaY < 0 ) {
        $( this ).slickNext();
    } else {
        $( this ).slickPrev();
    }
} ); // 未テストです
</script>

うまく動かなかったです
【動かない現象】
・マウススクロールに反応しない
・ドラッグしてスライダーを動かすのをoptionで無効にしていたがなぜか有効になっている

$(document).on('ready', function() {
    $( '.variable' ).slick( {
          dots: true
        , infinite: false
        , variableWidth: true
        , draggable:false
    } ).on( 'mousewheel', function( event, delta, deltaX, deltaY) {
        event.preventDefault();
        console.log( event );
        if (deltaY < 0 ) {
            //console.log("上");
            $( this ).slick("slickNext");
        } else {
            //console.log("下");
            $( this ).slick("slickPrev");
        }
    } );
    });

if (deltaY < 0 )の部分をdeltaYより～の記述で動きました
ありがとうございました