How to Get image from two different folders in dynamic slider using jQuery Slick plugin in jQuery

protected void Page_Load(object sender, EventArgs e)
{
    string strHtm = string.Empty;
    int i = 0;
    string[] filePaths = Directory.GetFiles(Server.MapPath("~/images/pic/"));

    foreach (string filePath in filePaths)
    {
        string fileName = Path.GetFileName(filePath);

        strHtm += @"<div style='width: 282px; height: 20%' id='DivNew" + i + @"'>
        <div class='flip'>
        <div class='front'>
        <img id='image' src='images/pic/" + fileName + @"'  />
        </div>
        <div class='back'>
        <img id='image' src='images/default/" + fileName + @"'/>
        </div>
        </div></div>";
    }
    Slider3.InnerHtml = strHtm;
}

Above code is working for dymaic slider and fliping of image but i want to different image from different folder what should i do.image/pic is showing image properly.But when i use image/default it is not displaying image what should i do for it?

<style>
        slick-prev
        {
            left: 15px;
        }
        .slick-next
        {
            right: 15px;
        }
         
        .slick-prev, .slick-next
        {
            height: 40px;
            width: 40px;
            z-index: 9;
            background: black;
            border-radius: 100%;
        }
        .slick-prev:before, .slick-next:before
        {
            font-family: 'slick';
            font-size: 20px;
            line-height: 1;
            opacity: .75;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
         
         
        .imgslide
        {
            margin-top: 4px;
            display: inline-block;
            border: solid 1px #E4E4E4;
        }
         
        .multiple-items
        {
            width: 100%;
            margin-top: 10px;
        }
        .slick-initialized .multiple-items
        {
            display: block;
            height: 359px;
            width: 131px;
        }
         
        .flip
        {
            width: 56%;
            border: 2px solid #f1f1f1;
            margin: 0 auto;
            transform: scale(-1, 1);
            -moz-transform: scale(-1, 1);
            -webkit-transform: scale(-1, 1);
            -o-transform: scale(-1, 1);
            -khtml-transform: scale(-1, 1);
            -ms-transform: scale(-1, 1);
        }
        .flip img
        {
            width: 246px;
            height: auto;
        }
        .flip .back
        {
            color: #fff;
            text-align: center;
            width: 246px;
            height:auto;
             
        }
        .next
        {
            right: 0px;
        }
        .prev
        {
            left: 0px;
        }
        .slick-initialized .slick-slide
        {
            display: block;
        }
        element.style
        {
            backface-visibility: hidden;
            transform-style: preserve-3d;
            height: 100%;
            width: 246px;
            position: relative;
            transition: all 0.5s ease-out;
            transform: rotateY(-180deg);
            z-index: 0;
        }
        .slick-slide img
        {
            display: block;
            width: 100%;
        }
        .slick-slide
        {
            width: 200px;
            height: 200px;
        }
        .slick-slide slick-active
        {
            height: 100px;
            width: 100px;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"
        rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <script type="text/javascript">
    jQuery(document).ready(function () {
    jQuery('.multiple-items').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
    });
  });
    </script>
    <script type="text/javascript">
        $(function () {
            $(".flip").flip({
                trigger: 'hover'
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $(".flip").flip({
                trigger: 'hover',
                axis: 'y'
            });
        });
    </script>
    <script type="text/javascript">
        $('#image').mouseover(function () {
            $(this).addClass('flip');
        }).mouseleave(function () {
            $(this).removeClass('flip');
        });
    </script>
</head>
<body>
    <form id="form2" runat="server">
    <div class="container">
        <div id="Slider3" class="multiple-items" runat="server">
        </div>
    </div>
    </form>
</body>
</html>