How can I change an image when I click a link with BxSlider?

I use a jQuery plugin, BxSlider. I'd like to show this part, I mean an image,

<li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>

when I click following this part.

<dd id="miori"><a href="">miori</a></dd>

How should I write JavaScript code for that movement? Would you please give me some pieces of advices?

<html>
<head>
    <title>bxslider</title>
    <link href="/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>

    <dl class="sample">
        <dt>menu</dt>
            <dd id="tao"><a href="">tao</a></dd>
            <dd id="miori"><a href="">miori</a></dd>
    </dl>  <!-- sample -->

    <ul class="bxslider">
        <li id="tao"><img src="http://koi-navi.net/wp-content/uploads/2015/10/5e9dd24e-e1444440113499.jpg"> </li>
        <li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>
    </ul>  <!-- bxslider -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript" ></script>}
    <script type="text/javascript">
        $(document).ready(function(){
            $('.bxslider').bxSlider();
            $('dd#miori').on('click', function(){
                alert("hello");  // what should I write here?
            });
        });
    </script>

</body>
</html>

Solution

Refer This: http://bxslider.com/examples/thumbnail-pager-1

Try this:

<html>
    <head>
        <title>bxslider</title>
        <link href="/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
    </head>
    <body>

        <!-- <dl class="sample">
             <dt>menu</dt>
                 <dd id="tao"><a href="">tao</a></dd>
                 <dd id="miori"><a href="">miori</a></dd>
         </dl>  <!-- sample -->
        <div id="bx-pager">
            <a data-slide-index="0" href="">tao</a>
            <a data-slide-index="1" href="">miori</a>
        </div>
        <ul class="bxslider">
            <li id="tao"><img src="http://koi-navi.net/wp-content/uploads/2015/10/5e9dd24e-e1444440113499.jpg"> </li>
            <li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>
        </ul>  <!-- bxslider -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript" ></script>}
        <script type="text/javascript">
            $(document).ready(function () {
                $('.bxslider').bxSlider({pagerCustom: '#bx-pager'});
                /*$('dd#miori').on('click', function () {
                    alert("hello");  // what should I write here?
                });*/
            });
        </script>

    </body>
</html>