jQuery

【jQuery】jQueryで作成されたフルスクリーンスライダーgSlider

May 1, 2017
gslider

gSliderはjQueryで作成されたレスポンシブのフルスクリーンスライダー。

HTML

    <section class="slider-section">
        <div class="prevnext">
            <div class="pos-rel">
                <div class="prev"><i class="fa fa-chevron-left fa-3x"></i></div>
                <div class="next"><i class="fa fa-chevron-right fa-3x"></i> </div>
            </div>
        </div>
        <div class="container">
            <div class="slide1"></div>
            <div class="slide2"></div>
            <div class="slide3"></div>
            <div class="slide4"></div>
            <div class="slide5"></div>
        </div>
        <div class="indicators">
            <ul>
                <li class="indicator" slide-to="0"></li>
                <li class="indicator" slide-to="1"></li>
                <li class="indicator" slide-to="2"></li>
                <li class="indicator" slide-to="3"></li>
                <li class="indicator" slide-to="4"></li>
            </ul>
        </div>
    </section>
<style>
        .slide1{background-image: url('images/1.jpg');}
        .slide2{background-image: url('images/2.jpg');}
        .slide3{background-image: url('images/3.jpg');}
        .slide4{background-image: url('images/4.jpg');}
        .slide5{background-image: url('images/5.jpg');}
        .prevnext{position:absolute;z-index: 1000!important;width: 100%;top:45%;}
        li.indicator:hover, i:hover{cursor: pointer;}
        body{overflow: hidden;}
        .slider-section{height: 100vh;}
        .pos-rel{position: relative;}
        .container {background-color: black;margin: 0 auto;text-align: center;position: relative;height: 100%;overflow: hidden;}
        .container div{height: 100%;width: 100%;background-size: cover;background-attachment: fixed;background-position: center;}
        .next{right:3%;}
        .prev{left: 3%;}
        .prev,.next{position: absolute;color: #f5f5f5;display: inline-block;}
        body{margin:auto;}
        .indicator{padding:7px;border:2px solid #f5f5f5;margin-right:5px;border-radius:50%;}
        .indicators{position:absolute; z-index: 998; width:100%; bottom:10px; text-align: center;}
        ul{list-style: none; padding: 0px;margin: 0;}
        li{display: inline-block}
        .container div {background-color: white;width: 100%;display: inline-block;display: none;}
        .container img {width: 100%;height: auto;}
        .indicators{display: block!important;}
        .container{background-color: #fff;}
        .container div:first-child{display: inline-block;}
    </style>
    <script>
        $( document ).ready(function(){
            var currentIndex = 0,items = $('.container div'),indicators = $('.indicators ul li'),slidesLen = items.length;
            indicators.css('background','#f5f5f5');
            indicators.eq(0).css('background','#707070');
            $('.indicators ul li').on('click', function(){
                clearInterval(autoSlider);
                var a = $(this).attr('slide-to');
                currentIndex = a;
                sliderAction();
            });
            function sliderAction() {
                currentIndex=parseInt(currentIndex);
                var item = $('.container div').eq(currentIndex);
                var curr = indicators.eq(currentIndex);
                indicators.css('background', '#fff')
                curr.css('background','#707070');
                items.hide();
                item.fadeIn();
            }
            var autoSlider = setInterval(function() {
                currentIndex = parseInt(currentIndex);
                currentIndex += 1;
                if (currentIndex > slidesLen - 1)
                    currentIndex = 0;
                sliderAction();
            }, 6000);
            $('.next').click(function() {
                clearInterval(autoSlider);
                currentIndex = parseInt(currentIndex);
                currentIndex += 1;
                if (currentIndex > slidesLen - 1)
                    currentIndex = 0;
                sliderAction();
            });
            $('.prev').click(function() {
                clearInterval(autoSlider);
                currentIndex = parseInt(currentIndex);
                currentIndex -= 1;
                if (currentIndex < 0)
                    currentIndex = slidesLen - 1;
                sliderAction();
            });
        });
    </script>