<section class=" section-onsale-product-carousel" data-animation="fadeIn">

    <header>
        <h1 class="h1">Deals of the week</h1>
    </header>
    <div class="owl-nav">
        <a href="#onsale-products-carousel-prev" data-target="#onsale-products-carousel-57176fb23fad9" class="slider-prev"><i class="fa fa-angle-left"></i>Previous Deal</a>
        <a href="#onsale-products-carousel-next" data-target="#onsale-products-carousel-57176fb23fad9" class="slider-next">Next Deal<i class="fa fa-angle-right"></i></a>
    </div>
    <div id="onsale-products-carousel-57176fb23fad9">
        <div class="onsale-product-carousel owl-carousel">
            <div class="onsale-product">
                <div class="onsale-product-thumbnails">


                    <div class="savings">
                        <span class="savings-text">
                            Save <span class="amount">&#36;20.00</span>
                        </span>
                    </div>


                    <div class="images"><a href="index.php?page=single-product" itemprop="image" class="woocommerce-main-image" title=""><img width="600" height="600" src="assets/images/deals/1.jpg" class="wp-post-image" alt="GamePad" title="GamePad"/></a>
                        <div class="thumbnails columns-3">
                            <a href="index.php?page=single-product" class="first" title=""><img width="180" height="180" src="assets/images/deals/1-1.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad" title="GamePad"/></a>
                            <a href="index.php?page=single-product" class="" title=""><img width="180" height="180" src="assets/images/deals/1-2.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad2" title="GamePad2" /></a>
                            <a href="index.php?page=single-product" class="last" title=""><img width="180" height="180" src="assets/images/deals/1-3.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad3" title="GamePad3" /></a>
                        </div>
                    </div>
            </div>
            <div class="onsale-product-content">

                <a href="index.php?page=single-product"><h3>Game Console Controller <br/>+ USB 3.0 Cable</h3></a>
                <span class="price"><span class="electro-price"><ins><span class="amount">&#36;79.00</span></ins> <del><span class="amount">&#36;99.00</span></del></span></span>
                <div class="deal-progress">
                    <div class="deal-stock">
                        <span class="stock-sold">Already Sold: <strong>2</strong></span>
                        <span class="stock-available">Available: <strong>26</strong></span>
                    </div>
                    <div class="progress">
                        <span class="progress-bar" style="width:8%">8</span>
                    </div>
                </div>
                <div class="deal-countdown-timer">
                    <div class="marketing-text text-xs-center">
                        Hurry Up! Offer ends in:			</div>
                        <span class="deal-end-date" style="display:none;">2016-12-31</span>
                        <div id="deal-countdown" class="countdown"></div>
                        <script>
                        // set the date we're counting down to
                        var deal_end_date = document.querySelector(".deal-end-date").textContent;
                        var target_date = new Date( deal_end_date ).getTime();

                        // variables for time units
                        var days, hours, minutes, seconds;

                        // get tag element
                        var countdown = document.getElementById( 'deal-countdown' );

                        // update the tag with id "countdown" every 1 second
                        setInterval( function () {

                            // find the amount of "seconds" between now and target
                            var current_date = new Date().getTime();
                            var seconds_left = (target_date - current_date) / 1000;

                            // do some time calculations
                            days = parseInt(seconds_left / 86400);
                            seconds_left = seconds_left % 86400;

                            hours = parseInt(seconds_left / 3600);
                            seconds_left = seconds_left % 3600;

                            minutes = parseInt(seconds_left / 60);
                            seconds = parseInt(seconds_left % 60);

                            // format countdown string + set tag value
                            countdown.innerHTML = '<span data-value="' + days + '" class="days"><span class="value">' + days +  '</span><b>Days</b></span><span class="hours"><span class="value">' + hours + '</span><b>Hours</b></span><span class="minutes"><span class="value">'
                            + minutes + '</span><b>Mins</b></span><span class="seconds"><span class="value">' + seconds + '</span><b>Secs</b></span>';

                        }, 1000 );
                        </script>
                    </div>

                </div>
            </div>
            <div class="onsale-product">
                <div class="onsale-product-thumbnails">


                    <div class="savings">
                        <span class="savings-text">
                            Save <span class="amount">&#36;0.00</span>
                        </span>
                    </div>


                    <div class="images"><a href="index.php?page=single-product" itemprop="image" class="woocommerce-main-image" title=""><img width="600" height="600" src="assets/images/deals/2.jpg" class="wp-post-image" alt="GamePad" title="GamePad"/></a>
                        <div class="thumbnails columns-3">
                            <a href="index.php?page=single-product" class="first" title=""><img width="180" height="180" src="assets/images/deals/2-1.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad" title="GamePad"/></a>
                            <a href="index.php?page=single-product" class="" title=""><img width="180" height="180" src="assets/images/deals/2-2.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad2" title="GamePad2" /></a>
                            <a href="index.php?page=single-product" class="last" title=""><img width="180" height="180" src="assets/images/deals/2-3.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad3" title="GamePad3" /></a>
                            <a href="index.php?page=single-product" class="last" title=""><img width="180" height="180" src="assets/images/deals/2-4.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="GamePad3" title="GamePad3" /></a>
                        </div>
                    </div>
                </div>
                <div class="onsale-product-content">

                    <a href="index.php?page=single-product"><h3>Ultra Wireless S50 Headphones S50 with Bluetooth</h3></a>
                    <span class="price"><span class="electro-price"><ins><span class="amount">&#36;1,215.00</span></ins> <del><span class="amount">&#36;2,299.00</span></del></span></span>
                    <div class="deal-progress">
                        <div class="deal-stock">
                            <span class="stock-sold">Already Sold: <strong>0</strong></span>
                            <span class="stock-available">Available: <strong>30</strong></span>
                        </div>
                        <div class="progress">
                            <span class="progress-bar" style="width:0%">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
