<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('ayarlar.baslik') }} Manşet Haberleri</title>
    <meta name="description" content=""/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('assets/frontend/tema9/css/siteneekle.css')}}">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

</head>
<body>
<style>
    .tabsbx .num { padding: 0px 5.5px; }
</style>
<div style="width: 615px; height: 510px;">
    <div class="tabsbx">
        <div class="tab-content">
            <div id="tab1" class="tab-pane fade in active">
                <div class="catsld swiper-container t1c">
                    <div class="swiper-wrapper">
                        @foreach($buyukMansetEkle as $buyukManset)
                        <div class="swiper-slide">
                            <a href="{{ url('haber/'.$buyukManset->slug.'-'.$buyukManset->id) }}" target="_blank">
                                <span>
                                    <strong>
                                        {{ $buyukManset->baslik }}
                                    </strong>
                                </span>
                                <img class="img-fluid" src="{{ url('images/haberler/'.$buyukManset->resim ) }}" alt="{{ $buyukManset->baslik }}">
                            </a>
                        </div>
                        @endforeach
                    </div>
                    <div class="swiper-numeric"></div>
                    <ins class="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></ins>
                    <ins class="next"><i class="fa fa-chevron-right" aria-hidden="true"></i></ins>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    if ($('.catsld').length) {
        $('.catsld').each(function (index) {
            var prvBT = $(this).find('ins.prev');
            var nxtBT = $(this).find('ins.next');

            var tabId = $($(this)[0]).parent('.tab-pane').attr('id');
            var catsldpag = $('#' + tabId + ' .swiper-numeric');
            var i = 1;
            var mnsLink = 'undefined';
            $('#' + tabId).find('.swiper-slide').each(function () {
                mnsLink = $(this).find('a').eq(2).attr('href');
                if (mnsLink === undefined || mnsLink === null) {
                    mnsLink = $(this).find('a').attr('href');
                    if (mnsLink === undefined) {
                        mnsLink = '#';
                    }
                }
                catsldpag.append('<a href="' + mnsLink + '" class="num" target="_blank">' + i + '</a>');
                i++;
            });

            var catsld = new Swiper($(this)[0], {
                effect: 'fade', fade: {crossFade: true},
                prevButton: prvBT, nextButton: nxtBT,
                loop: true,
                spaceBetween: 0,
                autoplay: 7000,
                preventClicks: false,
                onSlideChangeEnd: function (swiper) {
                    var ai = parseInt($('#' + tabId + ' .swiper-slide-active').data("swiper-slide-index"));
                    catsldpag.children('a').removeClass('act');
                    catsldpag.children('a').eq(ai).addClass('act');
                }
            });

            catsldpag.children('a').mouseover(function () {
                var indx = $(this).index() + 1;
                catsld.slideTo(indx, 0);
            });
        });
    }
</script>
</body>
</html>
