slider.html

slider.html

<!-- Title & Image Slider -->
                <div class="container">
                    <div id="titleDiv">
                        <div id="title">
                            <img id="heartImg" src="images/brand-heart-icon.png">
                            <h2 id="brandTitle">Best Seller 品牌館<span id="burger">
                                <a href="#" data-am-offcanvas="{target: '#menu'}" class="am-menu-toggle">
                                    <i class="am-menu-toggle-icon am-icon-reorder"></i>
                                </a>
                                </span></h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="am-u-md-10 brandBox am-u-sm-centered">
                <div class="container">
                    <div id="sliderContainer">
                        <!-- Arrow slider buttons -->
                        <div id="goPrevBtn" class="sliderBtn" >
                            <div class="btnArrow" id="btnArrowPrev">
                                <a><i class="fa fa-chevron-left" id="btnLeftIcon" aria-hidden="true"></i></a>
                            </div>

                        </div>
                        <div id="goNextBtn" class="sliderBtn">
                            <div class="btnArrow" id="btnArrowNext">
                                <a><i class="fa fa-chevron-right" id="btnRightIcon" aria-hidden="true"></i></a>
                            </div>
                        </div>

                        <div id="pagesStripe">
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo1.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo2.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo3.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo4.png" alt=""></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo5.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo6.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo7.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo8.png" alt=""></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo9.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo10.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo11.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo12.png" alt=""></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo13.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo14.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo15.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo16.png" alt=""></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo17.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo18.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo19.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo20.png" alt=""></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo21.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo22.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo23.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo24.png" alt=""></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pages">
                                <ul>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo25.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo26.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">
                                            <a href="#"><img class="brandLogo" src="images/brand/logo27.png" alt=""></a>
                                        </div>
                                    </li>
                                    <li class="brand">
                                        <div class="imgDiv">

                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Image Slider -->