<?php require_once('__header.php'); ?>
    <div class="wrap">
        <div class="grid"></div>
        <h1 class="title"><?php echo $page->title; ?></h1>

        <?php
        $class = array('', 'media', 'interesting');
        foreach ($page->children() as $key => $item):
            echo ' <div class="lib-slid ' . $class[$key] . '"><div class="container"><h1>' . $item->title . '</h1></div>'
                . '<div class="swiper-container library"><div class="swiper-wrapper">';

            foreach ($item->children() as $child):
                $url = $child->url;
                $target = "";
                if ($child->redirect) :
                    $url = $child->redirect;
                    $target = "target=\"_blank\"";
                endif;
                echo '<div class="swiper-slide"><img src="' . $child->image->url . '">'
                    . '<div class="lib-footer"><a href="' . $url . '" ' . $target . '>'
                    . '<small>' . showDate($child->date) . '</small><span>' . $child->title . '</span>'
                    . '</a></div></div>';
            endforeach;

            echo '</div> <span class="swiper-button-next"></span>  <span class="swiper-button-prev"></span>  <div class="container">  </div></div></div>';
        endforeach;
        ?>
    </div>
    <script>
        // var swiper = new Swiper('.swiper-container', {
        //     pagination: '.swiper-pagination',
        //     slidesPerView: 3,
        //     centeredSlides: true,
        //     paginationClickable: true,
        //     spaceBetween: 0,
        //     grabCursor: true,
        //     nextButton: '.swiper-button-next',
        //     prevButton: '.swiper-button-prev'
        // });


     $(".swiper-container").each(function(index, element){
       var $this = $(this);
       $this.addClass("instance-" + index);
       $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
        $this.find(".swiper-button-next").addClass("btn-next-" + index);
    $this.find(".swiper-pagination").addClass("pagina" + index);
       var swiper = new Swiper(".instance-" + index, {
        nextButton: $this.find(".swiper-button-next")[0],
        prevButton: $this.find(".swiper-button-prev")[0],
            slidesPerView: 3,
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 0,
            grabCursor: true,
    pagination: $this.find(".swiper-pagination")[0],
        paginationClickable: true,
        // Disable preloading of all images
        preloadImages: false,
        // Enable lazy loading
        lazyLoading: true,

        breakpoints: {

            769: {
            slidesPerView: 2,
            centeredSlides: false
            },
            600: {
            slidesPerView: 1
            }
        }


    });
    });


    </script>
<?php require_once('__footer.php'); ?>